Usare gli environments in Angular 17

Mattepuffo's logo
Usare gli environments in Angular 17

Usare gli environments in Angular 17

Gli environments non sono una prerogativa di Angular 17, ma ci stavano anche nelle versioni precedenti.

Quello che ho capito è che nella 17 hanno fatto alcuni miglioramenti.

Potete generare i file environments con questo comando (se già non li avete):

ng generate environments

Verrà creata una cartella environments con due file dentro:

  • environments.development.ts
  • environments.ts

Nel primo ci ho messo questo dentro:

export const environment = {
  production: false,
  baseUrlApi: 'https://www.test.com/api/'
};

Nel secondo:

export const environment = {
  production: true,
  baseUrlApi: 'https://www.sito.com/api/'
};

In un nostro componente possiamo fare così:

import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {environment} from "../environments/environment";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  baseUrlApi: string = environment.baseUrlApi;
}

Se avviamo il progetto in sviluppo, verrà usato il development; potete tranquillamente visualizzare il valore nella pagina o in console.

Il trucco sta nel file angular.json, alla voce configurations; potete notare le due voci.

Nella development trovate il campo fileReplacement, che sostanzialmente scambia i due file.

E poi nel package.json:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Questo fa si che volendo potete creare un altro file environment, associandolo ad un'altra voce configurations, richiamata poi nel package.json.

Enjoy!


Condividi

Commentami!