Angular variabili di ambiente: come utilizzarle

Le variabili di ambiente di Angular sono delle informazioni che possono essere utilizzate nel codice di un’app Angular, ad esempio per far sì che l’applicazione abbia comportamenti differenti in funzione del contesto di esecuzione.

Utilizzare le variabili di ambiente Angular

Per chiarire meglio il concetto, ecco un esempio pratico: supponiamo che l’app Angular su cui stiamo lavorando abbia necessità di utilizzare Google Maps JavaScript API.

Questo prodotto per essere utilizzato ha bisogno di una chiave API, che solitamente ha delle restrizioni, sia in termini di API utilizzabili con una determinata chiave, sia in termini di dominio/IP dal quale le richieste vengono effettuate.

In questa situazione, solitamente si utilizzano due tipi di chiavi:

1. La chiave di sviluppo, con limitazioni basse o nulle, soprattutto in termini di dominio/IP consentito.
2. La chiave di produzione, con limitazioni stringenti, per evitare i “furti di quote”.

Questo tipo di configurazione si rende necessaria poiché, quando si lavora sull’app Angular, essa è esposta all’indirizzo http://localhost:4200/tramite il comando ng serve. Quando invece è in produzione, l’app sarà probabilmente esposta su un dominio pubblico del tipo https://www.ilmiosito.com/.

E’ quindi necessario che la chiave utilizzata per istanziare Google Maps JavaScript API sia la chiave di sviluppo quando l’app è esposta in localhost, mentre in produzione sia utilizzata la chiave opportuna.

Le variabili d’ambiente di Angular permettono di ottenere il comportamento desiderato.

I files di ambiente di Angular

Quando si crea un progetto Angular utilizzando Angular CLI, vengono generati due files, environment.ts e environment.prod.ts, nel percorso src/environments.
Entrambi i files esportano la costante environment, accessibile da ogni file sorgente dell’Angular app.

Nel caso l’app sia in ambiente di sviluppo, la costante esportata sarà quella contenuta in environment.ts, altrimenti, nel caso in cui l’app sia eseguita in un contesto di produzione, la costante esportata sarà quella contenuta in environment.prod.ts.

Impostare le variabili di ambiente

Una possibile configurazione per gestire le chiavi di Google Maps JavaScript API è

Il file environment.ts avrà una struttura simile a:

export const environment = {
  production: false,
  googleApiKey: 'Inserisci qui la chiave di sviluppo'
};

Il file environment.prod.ts avrà una struttura simile a:

export const environment = {
  production: true,
  googleApiKey: 'Inserisci qui la chiave di produzione'
};

Infine, è possibile accedere alle variabili d’ambiente nel seguente modo:

...
import {environment} from '../environments/environment';
...
if (environment.hasOwnProperty('googleApiKey')) {
  // utilizziamo una Google API Key per inizializzare Google Maps  
  initGoogleMaps(environment.googleApiKey);
}

Approfondimenti Angular

In questo blog sono presenti numerosi articoli dedicati ad RxJS ed Angular.

Eccone alcuni:

• RxJS cosa è e dove viene utilizzata
• RxJS: Hot Observables vs Cold Observables
• combineLatest RxJS: come utilizzarlo
• setTimeout JavaScript: programmare l’esecuzione di codice

Conclusioni

In questo articolo hai avuto modo di vedere come gestire le variabili d’ambiente di un’applicazione sviluppata utilizzando Angular.