Angular

Appearance

Configurer les environnements sur Angular ​

Lorsque vous développez une application Angular, vous pouvez avoir besoin de différentes configurations pour différents environnements comme le développement, la mise en production, ou le pré-lancement (staging). Angular offre une manière élégante de gérer ces configurations différentes grâce aux fichiers d'environnements.

Qu'est-ce qu'un Environnement dans Angular? ​

Un environnement dans le contexte d'Angular se réfère à une configuration spécifique qui peut varier selon le contexte de déploiement. Par exemple, en développement, vous pourriez avoir besoin d'une URL d'API différente de celle de la production.

Comment configurer des Environnements? ​

Étape 1: Générer les fichiers d'environnement ​

Commencez par générer les fichiers d'environnement à l'aide de la commande Angular CLI:

bash
ng generate environments
ng generate environments

Après avoir exécuté cette commande, un répertoire src/environments/ sera créé dans votre projet. Par défaut, vous aurez un fichier environment.ts qui est configuré pour la production.

Étape 2: Ajouter des configurations spécifiques à l'environnement ​

Si vous souhaitez ajouter des configurations spécifiques pour d'autres environnements, créez des fichiers supplémentaires dans le même répertoire. Par exemple:

  • environment.development.ts pour le développement.
  • environment.staging.ts pour le pré-lancement.

Voici un exemple de contenu pour ces fichiers:

typescript
// Dans environment.development.ts
export const environment = {
  production: false,
  apiURL: 'http://localhost:3000/api'
};

// Dans environment.staging.ts
export const environment = {
  production: false,
  apiURL: 'http://staging.mysite.com/api'
};
// Dans environment.development.ts
export const environment = {
  production: false,
  apiURL: 'http://localhost:3000/api'
};

// Dans environment.staging.ts
export const environment = {
  production: false,
  apiURL: 'http://staging.mysite.com/api'
};

Étape 3: Utiliser la Configuration de l'Environnement dans votre Application ​

Importez le fichier d'environnement approprié dans vos composants ou services pour accéder à vos variables de configuration:

typescript
import { environment } from 'src/environments/environment';

console.log(environment.apiURL);  // Affichera l'URL de l'API en fonction de l'environnement configuré
import { environment } from 'src/environments/environment';

console.log(environment.apiURL);  // Affichera l'URL de l'API en fonction de l'environnement configuré

Étape 4: Construire et Servir votre Application pour un Environnement Spécifique ​

Lorsque vous voulez construire ou servir votre application pour un environnement spécifique, utilisez l'option --configuration:

bash
ng serve --configuration=development
ng serve --configuration=development

ou

bash
ng build --configuration=staging
ng build --configuration=staging

Ainsi, Angular remplacera automatiquement le fichier environment.ts par le fichier d'environnement approprié pendant la construction.

Technique avec les InjectionTokens ​

Voir @Inject et InjectionToken

Un token d'injection est une clé que Angular utilise pour associer une valeur ou un service. Dans cet exemple, BASE_URL est un token d'injection. Il est défini quelque part dans votre projet comme une constante (par exemple src/app/core/constants/injection.ts)

typescript
import { InjectionToken } from '@angular/core';

export const BASE_URL = new InjectionToken<string>('BASE_URL');
import { InjectionToken } from '@angular/core';

export const BASE_URL = new InjectionToken<string>('BASE_URL');

Ce token peut ensuite être utilisé pour injecter une valeur spécifique dans d' autres parties de l'application.

Fournir le Token avec une Valeur ​

Lors de l'initialisation de l'application, vous souhaitez fournir une valeur à ce token d'injection en fonction de l'environnement actuel. C'est ce que fait le code suivant :

ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { BASE_URL } from './app/core/constants/injection';
import { environment } from './environments/environment';


platformBrowserDynamic([
  {
    provide: BASE_URL,
    useValue: environment.baseUrl
  }
]).bootstrapModule(AppModule)
  .catch(err => console.error(err));
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { BASE_URL } from './app/core/constants/injection';
import { environment } from './environments/environment';


platformBrowserDynamic([
  {
    provide: BASE_URL,
    useValue: environment.baseUrl
  }
]).bootstrapModule(AppModule)
  .catch(err => console.error(err));
ts
import { InjectionToken } from "@angular/core";

export const BASE_URL = new InjectionToken<string>('BASE_URL')
import { InjectionToken } from "@angular/core";

export const BASE_URL = new InjectionToken<string>('BASE_URL')
ts
export const environment = {
    baseUrl: 'https://jsonplaceholder.typicode.com'
};
export const environment = {
    baseUrl: 'https://jsonplaceholder.typicode.com'
};
ts
export const environment = {
    baseUrl: '' // production
};
export const environment = {
    baseUrl: '' // production
};

La méthode platformBrowserDynamic initialise la plateforme sur laquelle l'application va s'exécuter. Lors de cette initialisation, vous pouvez fournir des configurations supplémentaires.

Ici, vous fournissez la valeur environment.baseUrl au token d'injection BASE_URL. La valeur provient du fichier d'environnement approprié (environment.ts, environment.prod.ts, etc.) en fonction de la configuration de build/deploy.

Utiliser le Token Injecté ​

Maintenant que le token BASE_URL a une valeur associée, vous pouvez l'injecter dans n'importe quel composant, service ou module de votre application :

typescript
import { Component, Inject } from '@angular/core';
import { BASE_URL } from './core/constants/injection';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to my app!</h1>`,
})
export class AppComponent {
  constructor(@Inject(BASE_URL) private baseUrl: string) {
    console.log("Base URL:", this.baseUrl);  // Affiche l'URL de base pour l'environnement actuel
  }
}
import { Component, Inject } from '@angular/core';
import { BASE_URL } from './core/constants/injection';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to my app!</h1>`,
})
export class AppComponent {
  constructor(@Inject(BASE_URL) private baseUrl: string) {
    console.log("Base URL:", this.baseUrl);  // Affiche l'URL de base pour l'environnement actuel
  }
}

Dans l'exemple ci-dessus, le token BASE_URL est injecté dans le composant AppComponent, et sa valeur est stockée dans la variable baseUrl.