A la racine du projet se trouve un fichier capacitor.config.ts

Il est important de bien configurer les variables se trouvant dans ce fichier car elles vont permettre d'identifier l'application sur les stores

• appId : Identifiant unique de l'application
  • = Bundle ID sous iOS
  • = Application ID sous Android
• appName : Nom de l'application sur les stores
• webDir : Répertoire contenant l'app Angular compilée

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 doit 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 suffixe dans le nom du fichier environment.ts)

Environnements Firebase

Il est également possible d'utiliser plusieurs fichiers de configuration Firebase en fonction de l'environnement. Cela peut particulièrement être utile lorsque que l'on veut effectuer des tests de notification sans avertir tous les utilisateurs qui utilisent l'application de production.

Dans src/environments/firebase/ sous chaque dossier propre à la plateforme, vous pouvez ajouter autant de fichiers que vous souhaitez selon vos environnements.

Conf PWA

Pour la PWA, il convient de mettre à jour le chemin vers le fichier de configuration correspondant dans le fichier environment.ts

Par exemple, dans le fichier environment.developments.ts, on aura :

import firebasePwaEnvironment from './firebase/web/firebase-environment.pwa-development.json';

Conf applications mobiles

Pour les applications natives, il conviendra de copier le bon fichier dans l'arborescence du projet en renommant suivant le nom attendu :

• ios/App/App/GoogleService-Info.plist
• android/app/google-services.json

Cette étape peut être simplifiée par l'utilisation de l'outil Trapèze.

Environnements Trapeze

Trapeze est un outil qui permet de modifier de l'information à chaud directement dans les fichiers des applications natives, sans avoir à rebuilder les dossiers avec ionic cap sync
Pour plus d'informations sur trapeze : https://trapeze.dev/

Dans le projet Multi, trapeze est principalement utilisé pour mettre à jour le numéro de version de l'application et pour copier le bon fichier Firebase suivant l'environnement.
Vous pouvez alors partir du fichier trapeze-config.ts.dist pour créer autant de conf souhaitées selon vos environnements

Vous pourrez ensuite exécuter la conf trapeze en fonction de l'environnement en précisant le fichier à utiliser :

VERSION_NAME="1.1.0" BUILD_NUMBER="7" npx trapeze run trapeze-config.[environment].yml