Pour une meilleure compréhension de cet article, un niveau de connaissance d’au moins « débutant » est demandé sur Angular et le CLI Angular. Si ce n’est pas le cas, je vous invite à faire un petit tour sur : « https://angular.io/tutorial »
Dans cet article nous allons :
1. Découvrir les différents environnements créés par le CLI Angular
2. Modifier les informations de l’environnement
3. Montrer comment créer un nouvel environnement avec notre propre configuration
Pour travailler je vous montrerai des exemples de build sur un workspace que nous allons créer qui s’appellera « env-demo ».
Qu’est-ce qu’un Environnement d’Application Angular ?
Un Environnement d’Application Angular est l’information de configuration JSON qui indique au système de Build quels fichiers modifier lors de l’utilisation des commandes « ng build » et « ng serve ».
Admettons que nous avons une API REST déployée sur un serveur qui fournit des services à une application Angular. Nous pouvons très bien avoir une URL pour le serveur de développement, une autre pour le serveur de tests et une autre finalement pour le serveur de production. En utilisant les Environnements d’Application Angular nous allons pouvoir définir trois configurations et spécifier laquelle utiliser pour « ng build » et « ng serve ».
Cet article a pour cible Angular 6, cette version apporte de vraies améliorations quant à la facilité d’usage et la documentation des Environnements d’Application.
La documentation officielle pour les environnements Angular se trouve ici : « https://github.com/angular/angular-cli/wiki/stories-application-environments ».
Pour commencer :
Il faut s’assurer que la version 6 du CLI Angular soit installée. Nous allons utiliser le CLI Angular pour créer un workspace qui s’appellera « env-demo » avec la commande :
• ng new env-demo
Nous pouvons faire un test rapide pour lancer l’application par défaut :
• cd env-demo
• ng serve
Sur le navigateur aller sur : http://localhost:4200
Introduction aux configurations
Par défaut le CLI Angular crée un dossier « src/environments » avec deux fichiers d’environnement à l’intérieur : « environment.ts » et « environment.prod.ts ».
Ces fichiers sont référencés dans notre fichier « angular.json ». Prenez le temps pour chercher les lignes suivantes :
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}Il faut noter l’array « fileReplacements ». Cet array permet de spécifier via les commandes « ng build » et « ng serve » que si nous voulons utiliser la configuration de production il faudra remplacer le contenu du fichier environment.ts par celui du fichier environment.prod.ts.
Un exemple assez simple d’Environnement
Nous allons ensuite voir un exemple qui montre comment alterner entre la configuration par défaut et la configuration de production et afficher de la data de configuration appartenant au fichier de configuration correspondant.
Nous allons modifier le fichier « src\app\app.component.html » et « src\app\app.component.ts » comme suit :
app.component.html
<h1>
Environment
</h1>
<pre>{{env | json}}</pre>• {{ env | json }} : Cette expression transforme une valeur (dans ce cas l’objet « env » défini dans le fichier app.componentn.ts) en sa représentation formattée .json
app.component.ts
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 {
env = environment;
}Regardons dans le fichier « app.component.ts » les lignes 2 et 10 :
import { environment } from '../environments/environment';env = environment;Cela importe le fichier d’environnement en tant que « environnement ». Après nous initialisations notre variable local « env » pour que notre code dans « app.component.html » puisse y accéder. Il faut tenir compte que le composant « app.component.html » ne peut accéder qu’aux membres publics C’est pour cette raison qu’il n’arriverait pas à voir « environment » directement.
Ensuite nous afficherons le contenu de l’objet json dans le template de notre composant comme ça :
•
{ { env | json } }D’abord nous allons faire un « ng serve » en utilisant le fichier de configuration par défaut :
• ng serve
Nous allons maintenant ouvrir le navigateur sur : http://localhost:4200 et nous devrions retrouver quelque chose comme ça :
Remarque : Il faut considérer que ceci concorde avec ce que nous voyons sur notre fichier par défaut « src\environments\environment.ts ».
Maintenant essayons d’utiliser le fichier de configuration de « prod ». Pour faire cela nous utiliserons la commande « ng serve » avec la configuration de production :
• ng serve –configuration=production
Maintenant l’IHM affiche le contenu du fichier « src\environments\environment.prod.ts ».
Dû au fait que nous avons utilisé le flag de configuration de production, Angular a remplacé le contenu de notre fichier « environment.ts » avec le contenu de notre fichier « environment.prod.ts ».
Modification d’Information de Configuration
Regardons à nouveau le fichier « src\environments\environment.ts ». Il faut bien noter que c’est du TypeScript et que le fichier exporte un seul objet appelé « environment »
environment.ts
export const environment = {
production: false,
};Mettons à jour l’objet pour ajouter le nom de l’environnement. Rappelez-vous que « src\environments\environment.ts » sera utilisé par défaut donc il faut le modifier comme il suit :
environment.ts
export const environment = {
production: false,
name: 'default',
};Maintenant il faut lancer à nouveau l’application avec la configuration par défaut :
• ng serve
Nous allons voir désormais l’information de configuration de notre composant mise à jour.
Nous pouvons bien sûr ajouter des choses comme par exemple : URLs, des flags de débogage, etc. ou n’importe quelle donnée dont notre application Angular a besoin.
IMPORTANT : Toute donnée dans le fichier d’environnement sera visible pour le client. Il ne faut jamais ajouter d’information sensible comme mots de passe, etc. dans nos fichiers d’environnement
Ajouter des environnements
Au-delà des environnements existants par défaut lors de la création d’un workspace, nous pouvons aussi créer nos propres environnements. Ajoutons un nouvel environnement appelé « preprod ».
Créez un nouveau fichier d’environnement dans :
• « src\environnements\environment.preprod.ts
Avec le contenu :
environment.preprod.ts
export const environment = {
production: false,
name: 'preprod',
};Nous devons modifier le fichier « angular.json » pour prendre en compte notre nouvel environnement. Dans l’élément « build » il y a un objet « configurations ». Ajoutez un nouvel objet pour notre configuration preprod pour qu’elle ressemble à ça :
angular.json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"preprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.preprod.ts"
}
]
}
}Cette modification n’affecte que « ng build ». Nous voulons aussi être capables de l’utiliser quand on utilise « ng serve ». Nous avons besoin de faire encore un petit changement.
Dans l’élément « serve » ajoutez une référence vers notre configuration de preprod. Cela devrait ressembler à ça :
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "env-demo:build"
},
"configurations": {
"production": {
"browserTarget": "env-demo:build:production"
},
"preprod": {
"browserTarget": "env-demo:build:preprod"
}
}
},Nous pouvons désormais lancer notre application en utilisant l’environnement de preprod
Exemples pratiques
Nous pouvons très bien vouloir afficher une IHM légèrement différente par rapport à l’environnement sur lequel nous travaillons.
Si nous voulions par exemple afficher une couleur différente sur le header de la page et n’afficher la version de l’application que si l’environnement est différent de production il suffirait de modifier les fichiers « app.component.html », « app.component.ts » et « app.component.css » de la façon suivante :
app.component.html
<div style="margin: 10px">
<div class="{{navClass}}">
<div class="row">
<h2 class="col-sm-11">
Nos Environnements d'Application Angular
</h2>
<div *ngIf="!isProduction" class="col-sm-1">
<pre>{{ version }}</pre>
</div>
</div>
</div>
<div>
Environment
</div>
<pre>{{env | json}}</pre>
</div>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 {
env = environment;
navClass = environment.production ? 'app-toolbar' : 'app-preprod-toolbar';
version = environment.version;
isProduction = environment.production;
backendServer = environment.backendServer;
}.app-preprod-toolbar
{
padding: 10px;
border: medium solid;
background-color: darkblue;
border-color: darkblue;
color: darkgoldenrod;
}
.app-preprod-toolbar pre
{
color: darkgoldenrod;
}
.app-toolbar
{
padding: 10px;
border: medium solid;
background-color: lightgray;
border-color: lightgray;
color: darkgoldenrod;
}Et finalement en lançant la commande « ng serve –configuration=preprod » ou tout simplement « ng serve », nous pouvons constater que nos variables d’environnement ont bien été prises en compte.
De la même façon en lançant la commande serve sur prod « ng serve –configuration=production » nous pouvons observer les changements sur l’IHM.
Encore un autre exemple
Nous pouvons définir dynamiquement via l’utilisation d’Environnements d’Application Angular les URLs pour les appels vers le backend.
Pour faire cela il faut ajouter aux fichiers d’environnement (« environments.ts », environments.preprod.ts » et « environments.prod.ts ») l’objet « backendServer » et lui assigner une url quelconque :
environment.ts
export const environment = {
production: false,
name: 'default',
version: 'v1.0',
backendServer: 'http://localhost:5000'
};environment.preprod.ts
export const environment = {
production: false,
name: 'preprod',
version: 'v1.0',
backendServer: 'https://192.168.40.66'
};environment.prod.ts
export const environment = {
production: true,
name: 'prod',
version: 'v1.0',
backendServer: 'https://192.168.40.58'
};Ensuite nous devons modifier les fichiers « app.component.html », et « app.component.ts » :
app.component.html
Nos Environnements d’Application Angular
{{ version }}{{env | json}}Envoyer Requette
app.component.tsimport { Component } from '@angular/core';
import { environment } from '../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
env = environment;
navClass = environment.production ? 'app-toolbar' : 'app-preprod-toolbar';
version = environment.version;
isProduction = environment.production;
backendServer = environment.backendServer;
}Finalement si nous lançons l’application Angular sur la configuration par défaut « ng serve »
En preprod « ng serve–congfiguration=preprod »
Et finalement en prod « ng serve –configuration=prod »
Résumé
Nous savons désormais comment ajouter nos propres environnements.
Utilisez les Environnements d’Application Angular quand vous avez besoin d’un moyen approprié pour gérer l’information de configuration pour vos applications.
