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:

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:

// 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:

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:

ng serve --configuration=development

ou

ng build --configuration=staging

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