Angular e le variabili environments

Lavori ad un progetto Angular e vorresti usare ambienti diversi senza dover cambiare sempre tutto?

In questo articolo vedremo a cosa servono e come usare le variabili di ambiente.

Quando crei un progetto Angular, vengono generati almeno due file nella folder src/environments:

  1. environment.ts
  2. environment.prod.ts.

export const environment = {
production: false
}

Questi due file sono generati perché si ipotizza di lavorare sempre “almeno” su due ambienti: sviluppo e produzione.

Alle volte, invece, dovrai lavorare su più ambienti quindi ti basterà creare nuovi files nella stessa folder come environment.xxx.ts dove xxx sarà il nuovo ambiente.

Questi file essenzialmente espongono un oggetto json dove potrai mappare tutto ciò che vuoi abbia valori diversi per ambienti diversi, come ad esempio degli url per chiamate a servizi o altro.

Ma come usiamo queste variabili nei nostri components Angular?

Ipotizziao di aver mappato un url da bindare un anchor tag.

Utilizzando app.component.ts prima di tutto importeremo l’oggetto environment dal file src/environments/environment.ts

import { environment } from ‘../environments/environment’;

Ora environment sarà visibile nel nostro app.component e potremo usarne il contenuto come segue

export class AppComponent {
public envVar= environment.production;
countructor (){
}
}

Il file senza l’ambiente nel nome è naturalmente quello di default. Questo verrà usato dalla nostra applicazione quando la eseguiremo con il comando npm start o con ng serve –open.

Quando invece andremo a buildare il nostro progetto con il comando ng build, potremo specificare quale ambiente stiamo compilando.

ng build –prod

Automaticamente il file giusto sarà preso in considerazione, minificato e, incluso nel progetto pronto per il deploy.

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *