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" } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Le novità di .NET 7 e C# 11
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
Organizzare il codice JavaScript utilizzando i moduli
Eseguire attività pianificate con Azure Container Jobs
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Usare il versioning con i controller di ASP.NET Core Web API
Gestire gli errori di caricamento delle immagini
Gestire server e pc on premise con Azure Arc
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Sfruttare l'output cache di ASP.NET Core 7 con i controller
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5