Angular Basics : Variables d’environnement – Configurations de construction

Dans le blog d’aujourd’hui, nous allons configurer divers environnements pour déployer votre application Angular et travailler avec des variables d’environnement.

Conditions préalables

Les développeurs de tous niveaux, des débutants aux experts, peuvent lire cet article. Peu importe si vous connaissez les concepts pour débutants dans Angular. Voici quelques éléments que vous devriez avoir pour pouvoir suivre la démonstration de cet article :

• Un environnement de développement intégré comme VS Code
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l’installation de Node)
• CLI angulaire version 8.0 ou supérieure
• Version angulaire 12 ou supérieure

D’autres avantages incluent :

• Connaissance pratique du framework Angular à un niveau débutant.

Que sont les environnements angulaires ?

Lorsque vous travaillez dans une entreprise ou pour un projet non personnel avec une équipe, vous constaterez généralement qu’il existe différents environnements, comme un environnement de test, de mise en scène, de développement et de production, et il pourrait même y en avoir plus. Pour plus de contexte, un environnement Angular n’est rien d’autre qu’une configuration ou un ensemble de règles dans un fichier JSON qui indique au système de construction Angular les fichiers à modifier lorsque vous exécutez ng serve.

Les environnements sont essentiels pour utiliser et tester votre code personnellement (environnement de développement local), avec votre équipe avant qu’il ne soit mis en ligne (environnement de staging), puis lors de la mise en ligne (environnement de production). Ces différents environnements assurent une indépendance totale quant à la fonction de l’environnement particulier que vous utilisez.

Comment Angular prend en charge cela

Créons un nouveau fichier Angular et voyons comment Angular par défaut prend déjà en charge la séparation de notre flux de travail par environnement. Exécutez la commande ci-dessous dans votre terminal dans n’importe quel dossier de votre choix.

ng new tuts

Après les invites, dites non au routage et choisissez CSS – et vous devriez avoir un nouveau projet Angular créé pour vous. Ouvrez le dossier src et vous remarquerez qu’il existe déjà un répertoire d’environnement par défaut.

Angular a deux environnements par défaut :

1. L’environnement de développement :

export const environment = {
  production: false
};

Ici la valeur de production est fausse car c’est l’environnement de développement.

2. L’environnement de fabrication :

export const environment = {
  production: true
};

La production que nous voyons ici s’appelle une variable d’environnement, comme son nom l’indique. Nous pouvons également ajouter d’autres variables à cela avec nos propres valeurs définies. Nous pouvons définir presque tout ce que nous voulons comme des noms, des numéros, etc.

export const environment = {
 production: false,
 link:'http://localhost',
 name:'development environment',
 code: 1001,
};

Le bloc de code ci-dessous est destiné à votre environnement de production :

export const environment = {
  production: true,
  link:'http://app-link',
  name:'production environment',
  code: 1004,
};

Configuration d’autres environnements

Nous cherchons à ajouter les environnements de mise en scène et de test aux environnements de développement et de production qui existent déjà par défaut. Vous pouvez créer autant d’environnements que vous le souhaitez dans Angular.

L’environnement de mise en scène

Commençons par créer l’environnement de mise en scène. Créez un nouveau fichier dans votre dossier d’environnement et appelez-le environment.staging.ts et copiez le bloc de code ci-dessous à l’intérieur :

export const environment = {
 production: false,
 link:'http://staging',
 name:'staging environment',
 code: 1003,
};

L’environnement de test

Créons l’environnement de test comme nous l’avons fait précédemment. Créez un nouveau fichier dans votre dossier d’environnement et appelez-le environment.staging.ts et copiez le bloc de code ci-dessous à l’intérieur :

export const environment = {
  production: false,
  link:'http://testing',
  name:'testing environment',
  code: 1002,
};

Informer Angular de ces nouveaux changements

Après avoir créé les fichiers et les variables d’environnement, vous devez vous assurer qu’Angular sait qu’ils ont été créés. Naviguez donc jusqu’au fichier Angular.json et jetez un œil à la section architecte et assurez-vous que la configuration ressemble à ceci :

"configurations": {
  "staging": {
    "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    }
   ]
  },
"testing": {
  "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.testing.ts"
  }
 ]
},
"production": {
  "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
 ],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
 ]
 }
}

Vous pouvez voir les options de test et de mise en scène ajoutées. La dernière chose à faire est dans la section Servir directement sous la construction. Assurez-vous d’apporter ces modifications ci-dessous :

"configurations": {
  "testing": {
    "browserTarget": "tuts:build:testing"
  },
  "staging": {
    "browserTarget": "tuts:build:staging"
  },
    "production": {
      "browserTarget": "tuts:build:production"
    }
  }

Nous en avons maintenant terminé avec le fichier angular.json, alors testons tout.

Tester de nouveaux environnements angulaires

Pour tester un nouvel environnement, exécutez la commande ci-dessous :

ng serve --configuration=testing

Pour la mise en scène, utilisez la configuration de mise en scène.

Vous pouvez maintenant accéder à localhost:4200 et voir que l’application est en direct sur votre serveur local dans l’environnement de test.

Comment savons-nous que cela fonctionne réellement ?

Vous pourriez penser que l’application en cours d’exécution est la même que celle qui s’exécute si vous venez d’entrer la commande ng serve. Ce n’est pas tout à fait vrai, alors trouvons la preuve qu’ils sont différents.

Ouvrez votre fichier component.ts et remplacez le contenu par ceci :

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

@Component({

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title="tuts";
link = environment.link;
name = environment.name;
code = environment.code;
}

Maintenant que les variables sont créées, confirmons dans quel environnement l’application est actuellement exécutée. Accédez au fichier app.component.html et remplacez la ligne 333 par ceci :

<span>This app is running in the {{ name }} with code {{ code }}.</span>

Enregistrez maintenant tous les fichiers et relancez l’application avec ceci :

ng serve --configuration=staging

Voici ce que vous devriez voir :

Conclusion

Dans cet article, nous avons appris à utiliser divers environnements dans nos flux de travail en tant que développeurs et comment ils peuvent tous être facilement configurés dans Angular. Nous avons également parlé de l’importance d’avoir différents environnements, puis mis en place deux environnements supplémentaires avec des exemples pour illustrer comment cela est fait.