Acceder a las variables de entorno en la compilación de producción Angular 4




api typescript (3)

Quiero implementar una compilación de producción de una aplicación angular con una API configurable para que el usuario la pruebe. Uso el environment.ts pero después de la compilación de producción, no sé cómo configurar las variables.

¿Qué enfoque hay que hacer?


¿Realmente necesitamos APP_INITIALIZER para cargar variables de entorno dinámicas

Bueno, a menos que necesitemos alguna llamada asíncrona para obtenerlos. De lo contrario, sugeriría esto:

env.js

(function (window) {
  window._env = window._env || {};
  window._env.url= 'http://api-url.com';
}());

index.html

<head>
  <script src="env.js"></script>
</head>
<body>
  <app-root></app-root>
</body>

Finalmente agrégalo en angular.json

"assets": [
              "any/env.js",

Ahora puedes leer la ventana usando un servicio en tu aplicación


¿Estás usando Angular-CLI? Debería ser fácil, entonces. Tienes algo como esto:

src/
  app/
  environment/
    environment.ts
    environment.prod.ts

Simplemente ponga una url diferente en environment.prod.ts y su compilación prod obtendrá una segunda url. Por ejemplo, digamos que su environment.ts ve así:

{
  "production": false,
  "apiUrl": "http://localhost:8080"
}

Ponga esto en environment.prod.ts :

{
  "production": true,
  "apiUrl": "https://example.com/api"
}

Puede configurar más entornos, verifique esa sección de .angular-cli.json y angular-cli repo.

Editar: según tu comentario, quieres más.

Sí, pero aún así esto no es configurable después de la compilación, ¿no? Como no sé qué url quiere usar el usuario, por lo tanto, quiero que sea configurable desde el exterior después de implementar la compilación.

Continuemos este escenario aún más. Tengamos un cliente de backend:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { apiUrl } from '../environment/environment.ts';
@Injectable()
export class BackendService {
    backendUrl: string = apiUrl;      

    constructor(private httpClient: HttpClient) {}

    get(endpoint: string, params: any): Observable<any> {
      const url= `${this.backendUrl}/${endpoint}`;
      return this.httpClient.get(url, params);
    }
}

Simplificado, pero funciona. Por defecto, configura su propia URL. Pero sus componentes pueden configurar la url sobre la marcha y obtener otras cosas de esa url.

Ahora, el siguiente paso sería ofrecer los backends que tiene. Esto puede ser una matriz preconfigurada, o puede dejar que el cliente ingrese la url libremente (simplemente cuadro de entrada). Puede tener un componente que haga eso y configure este servicio aquí. Probablemente también debería tener un servicio separado para su backend "adecuado", donde, por ejemplo, se encuentra su autenticación. Pero todo esto realmente depende de su escenario.


  • Ponga sus configuraciones en un archivo ts, en la carpeta de activos
  • al igual que estás obteniendo environment.ts, busca ese archivo y usa sus configuraciones
  • El contenido de la carpeta de activos no se minimiza, por lo que también se pueden configurar en la compilación de producción




production-environment