Accesso alle variabili di ambiente nella produzione di produzione Angolare 4

Voglio distribuire una build di produzione di un’app angular con un URL api configurabile che l’utente possa testare. Uso environment.ts ma dopo la produzione, non so come configurare le variabili.

Quale approccio deve essere fatto?

Stai usando Angular-CLI? Dovrebbe essere facile, quindi. Hai qualcosa di simile a questo:

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

Inserisci semplicemente un URL diverso in environment.prod.ts e il tuo prod produce un secondo URL. Ad esempio, supponiamo che il tuo environment.ts assomigli a questo:

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

Metti questo in environment.prod.ts :

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

È ansible configurare più ambienti, controllare quella sezione di .angular-cli.json e .angular-cli.json -cli repo.

Modifica: come per il tuo commento, vuoi di più.

Sì, ma ancora non è configurabile dopo la compilazione no? Perché non so quale URL debba essere usato dall’utente, quindi voglio renderlo configurabile dall’esterno dopo averlo distribuito.

Continuiamo questo scenario ulteriormente. Diamo un client di 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); } } 

Semplificato, ma funziona. Per impostazione predefinita, si imposta il proprio URL. Ma i tuoi componenti possono impostare l’URL al volo e ottenere altre cose da quell’URL.

Ora, il prossimo passo sarebbe, offrendo quali backend hai. Questo può essere un array preconfigurato, oppure puoi lasciare che il client inserisca l’url liberamente (semplicemente casella di input). Puoi avere un componente che lo fa e configura questo servizio qui. Probabilmente dovresti anche avere un servizio separato per il tuo backend “appropriato”, dove, ad esempio, le tue bugie di autenticazione. Ma tutto dipende davvero dal tuo scenario.

Il file * .ts dell’ambiente contiene configurazioni del tempo di costruzione, che non è ansible modificare dopo la creazione. Se è necessario modificare la configurazione dopo la generazione, è necessario inserirli in una posizione diversa e recuperarli dynamicmente all’avvio dell’applicazione

Quello che puoi fare è:

Passo 1 : metti i file di configurazione di json sotto src / assets / config / [envName] .json.

Nota: deve essere in formato json, non in formato ts

Passaggio 2 : aggiungere un nuovo servizio di configurazione

 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); }); }); } } 

Passo 3 : nel tuo modulo principale, aggiungi questo prima di dichiarare il modulo

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

Passaggio 4 : modificare i provider del modulo per aggiungere questo provider: […

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

Passo 5 : Nel tuo codice, invece di usare environment.configXXX, usa questo

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

Questo è un esempio semplificato, in realtà dovrai apportare alcune modifiche se usi angular universal dato che devi avere URL assoluti quando fai una chiamata http

  • Inserisci le tue configurazioni in un file ts, nella cartella delle risorse
  • proprio come stai recuperando environment.ts, prendi il file e usa le sue configurazioni
  • Il contenuto della cartella delle risorse non è minimizzato, quindi possono essere configurati anche in produzione