Créer et servir des applications angulaires dans des environnements avec environnement.ts (Angular)

En tant que développeur Angular, déployer votre application dans différents environnements – développement (dev), tests d'acceptation utilisateur (UAT) et production – est un phénomène courant. Cependant, modifier constamment le code pour répondre aux spécificités de cet environnement peut être fastidieux, sujet aux erreurs et nuire à l'efficacité.

Cet article décrit une approche étape par étape pour créer et servir votre application Angular dans divers environnements sans modifier la base de code, en tirant parti de la puissante fonctionnalité Environment.ts.

Scénario:

Imaginez une application Angular où le frontend interagit avec les API backend hébergées sur différents environnements. Explorons comment créer de nouveaux environnements, les configurer et servir/construire votre application en fonction de l'environnement cible.

Configuration des environnements :

Générer des fichiers d'environnement :

Exécutez la commande suivante dans votre terminal :

ng générer des environnements

Cela crée un dossier nommé environnements dans le répertoire src, contenant un fichier environnement.ts initial. Par défaut, ce fichier sert de configuration de votre environnement de développement.

Définition des variables d'environnement :

Ouvrez Environment.ts et définissez vos variables d'environnement de développement :

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

Création de fichiers spécifiques à l'environnement :

Pour les environnements UAT et Production, créez des fichiers séparés :

environnement.test.ts (pour UAT)
environnement.prod.ts (pour Production)

Ajoutez vos URL UAT et API de production respectives à ces fichiers :

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Utiliser des environnements dans le code :

Pour utiliser l'URL de l'API dans votre code :

Importer environnement.ts :

importer { environnement } depuis './environments/environment';

URL d'accès à l'API :

Dans votre service ou composant, injectez la variable d'environnement :

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

Configuration d'angular.json pour les builds spécifiques à l'environnement :

Configurations cibles :

Ouvrez angulaire.json et localisez la section « configurations » sous « build ». Ceci définit les configurations de build pour différents environnements.

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

Cela demande à la CLI angulaire de remplacer l'environnement par défaut.ts par Environment.prod.ts lors des versions de production et Environment.test.ts pour les versions UAT.

Pour servir les applications sur plusieurs environnements, vous pouvez ajouter des configurations de service dans angulaire.json comme :

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

Construire et servir pour des environnements spécifiques :

Construire pour la production :

Pour créer votre application pour la production, utilisez :

ng build --configuration=production

Utiliser le nom de la configuration définie dans angulaire.json (production, staging dans notre scénario)

Servir pour l'UAT :

Pour servir votre candidature pour l'UAT, utilisez :

ng serve --configuration=staging

Conclusion

L'utilisation de configurations spécifiques à l'environnement améliore considérablement l'expérience du développeur. Il offre une approche propre et maintenable, rationalisant le déploiement d'applications dans divers environnements et réduisant finalement le délai moyen de production (MTTP).

De plus, si vous avez aimé lire cet article, vous pouvez en apprendre davantage sur moi ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!