Quando creiamo un'applicazione Angular utilizzando la CLI, viene creata una cartella environments con due file: environment.ts e environment.prod.ts. Questi file contengono variabili di configurazione (url dei servizi, informazioni per il debug o altro ancora) rispettivamente per l'ambiente di sviluppo e per quello di produzione. Se usiamo il comando ng build, viene utilizzato il file environemnt.ts, mentre se usiamo ng build --configuration=production viene usato il file environment.prod.ts.
La scelta del file da usare in fase di build viene regolata dal file angular.json. All'interno di questo file abbiamo la sezione projects/{nomeapplicazione}/architect/build/configurations. All'interno della sezione c'è una chiave "production" che corrisponde al valore passato al parametro di build "configuration". Se non usiamo il parametro "configuration", la build usa i settings di default, se invece passiamo al parametro un valore che non è presente nella sezione, la build va in errore. All'interno di production, troviamo la proprietà fileReplacements così dichiarata.

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    ....
  }
}

Questa sezione indica al compilatore Angular che il file environment.ts deve essere sostituito dal file environment.prod.ts.
Seguendo questa logica, possiamo creare più ambienti. Molto spesso non abbiamo solo un ambiente di sviluppo e uno di produzione, ma anche altri ambienti come test, staging, demo o altro ancora ognuno con la propria configurazione. Per creare una build diversa per ambiente dobbiamo seguire tre passi: la creazione del file di configurazione per il nuovo ambiente, la configurazione del nuovo ambiente di build e la possibilità di lanciare il web server in locale con le configurazioni appena create.

Il primo consiste nel creare un nuovo file all'interno della cartella environments assegnando alle variabili di configurazione i valori del nuovo ambiente. Il nome del file sarà environment.staging.ts.

export const environment = {
  production: false,
  serviceUrl: 'https://api-staging.myserver.com'
};

Il secondo step consiste nel creare all'interno della sezione configurations una nuova proprietà di nome staging all'interno della quale aggiungiamo la sezione fileReplacements per decidere di utilizzare il file environment.staging.ts in fase di produzione.

"configurations": {
  "production": {
    ...
  },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

Lanciando il comando ng build --configuration=staging otterremo una build che utilizza il file environment.staging.ts. Tuttavia, questa configurazione non ha effetti sul comando ng serve. Per lanciare il web server locale utilizzando i parametri di staging, dobbiamo andare nella sezione projects/{nomeapplicazione}/architect/serve/configurations e creare una chiave con il nome dell'ambiente (staging) e specificare la proprietà browserTarget con il valore "{nomeapplicazione}:build:{nomeambiente}".

"configurations": {
  "staging": {
    "browserTarget": "myapp:build:staging"
  }
}