Comment avoir un fichier de configuration paramétrable pour plusieurs clients–Avec angular

Nous voici avec une application angular, créée pour plusieurs clients finaux. Cette application Angular, elle a une api web unique par client.
Quelles sont les solutions pour mettre ça en place avec Angular ? Découvrons les solutions possibles.

Le contexte – Une application Angular multi clients

Nous avons donc une application Angular, que l’on va développer une seule fois.
Or, une fois développée, elle va être déployée chez plusieurs clients.

Qui dit plusieurs clients, dit :

• une api web différente par client
• une configuration différente par client
• des ports ouverts différents

Nous allons nous centrer sur l’api web différente par client.

Au sommes, nous sommes à cette architecture :

La problématique – Une seule application compilée

Côté problématique, nous ne souhaitons compiler qu’une seule fois notre application Angular.

Or, en déposant notre SPA avec ses fichiers javascripts chez chacun de nos clients, nous ne devons pas à avoir à recompiler pour chaque API web, donc pour chaque client.

Regardons les pistes possibles pour y arriver :

1. Avoir une configuration par client, malgré tout, donc une compilation pour chaque client
2. Avoir un fichier de configuration que l’on retrouver en api web, qui sera chargé au démarrage de notre application
3. Trouver à créer un fichier javascript que l’on mettra à jour vient un script de déploiement.

Dans ce premier épisode, nous allons nous intéresser au fichier javascript avec script de déploiement.

Avoir un fichier javascript avec script de déploiement pour chaque application Angular

Ajout du fichier de configuration

Commençons tout d’abord par créer un fichier javascript avec la configuration de l’url de l’api cliente.

Créez ce fichier dans le dossier assets.

Puis référencez-le dans l’angular.json, comme fichier d’assets, dans la partie scripts.

Hey, attendez, c’est très bien ça, mais on doit s’assurer d’une chose, très importante :
– notre fichier custom-environment.js est-il chargé avant l’appel de notre app.component ?

Si ce n’est pas le cas, on a tout perdu sur cette piste !

En mettant un console.log dans le component et dans le fichier js, on peut valider que tout est ok, ouf !

Nous pouvons maintenant ajouter la configuration souhaitée dans notre fichier js :

Création du service d’appel de la variable customEnvironment

Nous voilà maintenant à créer un service permettant d’encapsuler la variable : customEnvironment.

ng generate service global-config

Ajoutons-lui la méthode qui retourne la valeur de l’url de l’api :

Réussite de notre mission Angular

Et voilà !

Plus qu’à appeler notre service là où l’on a besoin de l’url !

Lors de la livraison, nous aurons deux étapes à faire :

1. Lancer la commande : ng buil –prod, pour activer la génération aot. Nous ne le ferons qu’une seule fois.
2. Pour chaque déploiement chez un client, nous aurons juste à modifier l’url présente dans customEnvironment.api.url !

NOTE: nous pouvons améliorer notre service en combinant avec le développement, au besoin, pour gérer une url de dev.