Acceso a las variables de entorno en la construcción de producción Angular 4

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

¿Qué enfoque se debe hacer?

¿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 comstackción de prod obtenga una segunda url. Por ejemplo, digamos que su environment.ts ve así:

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

Pon 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 su comentario, quiere más.

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

Continuemos con este escenario. Tengamos un cliente de back-end:

 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 { 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 qué backends tienes. Esto puede ser una matriz preconfigurada, o puede dejar que el cliente ingrese la url libremente (simplemente ingrese el cuadro de entrada). Puede tener un componente que lo haga y configura este servicio aquí. Probablemente también deba tener un servicio separado para su backend “adecuado”, donde, por ejemplo, su mentira de autenticación. Pero todo esto realmente depende de tu situación.

El archivo environment * .ts contiene configuraciones de tiempo de comstackción, que no puede cambiar después de la comstackción. Si necesita cambiar su configuración después de la comstackción, debe colocarlos en un lugar diferente y recuperarlos dinámicamente cuando comience la aplicación.

Lo que puedes hacer es:

Paso # 1 : ponga sus archivos de configuración json bajo src / assets / config / [envName] .json.

Nota: tiene que ser formato json, no formato ts

Paso # 2 : agrega un nuevo servicio de configuración

 import {Inject, Injectable} from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {Observable} from 'rxjs/Rx'; import {environment} from "../../environments/environment"; /** * Declaration of config class */ export class AppConfig { //Your properties here readonly production: boolean; readonly name: string; readonly apiBaseUrl: string; } /** * Global variable containing actual config to use. Initialised via ajax call */ export let APP_CONFIG: AppConfig; /** * Service in charge of dynamically initialising configuration */ @Injectable() export class AppConfigService { constructor(private http: HttpClient) { } public load() { return new Promise((resolve, reject) => { let confName = environment.name + '.json'; this.http.get('/assets/config/' + confName).map(res => res as any).catch((error: any): any => { reject(true); return Observable.throw('Server error'); }).subscribe((envResponse :any) => { let t = new AppConfig(); //Modify envResponse here if needed (eg to ajust parameters for https,...) APP_CONFIG = Object.assign(t, envResponse); resolve(true); }); }); } } 

Paso # 3 : en su módulo principal, agregue esto antes de declarar el módulo

 /** * Exported function so that it works with AOT * @param {AppConfigService} configService * @returns {Function} */ export function loadConfigService(configService: AppConfigService): Function { return () => { return configService.load() }; } 

Paso # 4 : modifique los proveedores de módulos para agregar estos proveedores: […

  AppConfigService, { provide: APP_INITIALIZER, useFactory: loadConfigService , deps: [AppConfigService], multi: true }, ], 

Paso 5 : en su código, en lugar de usar environment.configXXX, use esto

 import {APP_CONFIG} from "../services/app-config.service"; //… return APP_CONFIG.configXXX; 

Este es un ejemplo simplificado, de hecho necesitarás hacer algunos cambios si usas angular universal ya que necesitas tener direcciones URL absolutas cuando realizas una llamada http.

  • Coloque sus configuraciones en un archivo ts, en la carpeta de activos
  • del mismo modo que está obteniendo environment.ts, busque ese archivo y use sus configuraciones
  • El contenido de la carpeta de activos no está minimizado, por lo tanto, también se pueden configurar en producción.