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
Aggiungere una GIF in un'applicazione Xamarin Forms
Implementare logiche di validazione complesse nelle EditForm di Blazor
Creare un web server locale con LiveReload
Ottimizzare la compilazione di applicazioni Angular con il Fast and Loose Incremental Checking di TypeScript
Ottimizzare le dimensioni di un'applicazione .NET Core tramite il trimming
Creare un interceptor per ottimizzare il codice SQL generato da Entity Framework Core
Utilizzare al meglio gli oggetti HTML input sfruttando i nuovi type
Modificare globalmente la modalità di esecuzione delle query con Include in Entity Framework Core 5
Il futuro delle applicazioni Windows con .NET 5
DevOps for any developer with GitHub
Eseguire del codice personalizzato al click di una checkbox in Blazor
Disabilitare Ivy in applicazioni Angular 9
I più letti di oggi
- Visual Basic 2010
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Modern Data Access with .NET Core and Entity Framework Core
- Rendering di raw HTML in Blazor
- Curiosi di sapere le novità di #azure per gli sviluppatori? Sintonizzatevi su #aspilive, con @crad77 Siamo sempre live da https://aspit.co/Rebuild-20