Pour pouvoir tester son application, il peut être utile (voire indispensable) d'avoir plusieurs configurations propres à chaque environnement mis en place dans l'établissement (dev, preprod, prod, ...).
Multi permet de créer plusieurs fichiers de configuration suivant l'environnement que l'on souhaite cibler.
Environnements Angular
Angular permet de gérer plusieurs fichiers d'environnement dans le dossier user-frontend-ionic/src/environments/
Vous pouvez utiliser autant de fichiers de configuration que vous souhaitez, en les nommant comme vous le souhaitez.
L'avantage par exemple ici, est que pour chaque environnement on va pouvoir avoir une url différente pour l'apiEndpoint, development pointera vers le backend de dev, staging vers celui de preprod, prod vers celui de production...
On pourra également paramétrer les modules des fonctionnalités différemment suivant les environnements.
Chaque fichier d'environnement doit être déclaré dans le fichier user-frontend-ionic/angular.json sous "configurations"
"configurations": {
"development": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
Il est également possible pour chaque environnement de jouer sur les paramètres de build Angular, comme l'utilisation du compilateur AOT ou encore la taille max que ne dois pas dépasser le bundle.
Builder le client Angular en précisant l'environnement
Pour pouvoir utiliser un fichier d'environnement spécifique au moment du build Angular, il est nécessaire de le préciser dans la commande :
npm run build -- --configuration=[environment]
Où [environment] correspond au nom du bloc défini dans le fichier angular.json (et non le nom du fichier environment.ts)
Important !
Si par la suite vous utiliser la commande ionic cap sync pour synchroniser votre bundle Angular avec les fichiers de l'app native, il est primordial de lui passer l'option --build
Sans quoi la commande sync va relancer le build Angular en reprenant le fichier environment.ts par défaut. Votre conf d'environnement sera alors écrasée !