Angular est un framework bien maintenu par une communauté très active autour de ce dernier. Cette réactivité permet la mise à jour continue du framework à travers la résolution des failles de sécurité et l'ajout de nouvelles fonctionnalités. Nous serons tôt ou tard confrontés à des soucis d'obsolescence lorsque la version de Angular que nous avons dans notre projet n'est plus LTS (Long Time Support). Dans cette situation, une mise à niveau ou une montée de version est importante pour résoudre les failles de sécurité ou bénéficier des nouveautés de notre framework préféré.

Cependant, cette tâche n'est pas si aisée parce qu'il faut s'assurer qu'il n'y a pas de régression après notre montée en version. Nous verrons ensemble comment le faire un toute sérénité.

1. Consulter le site Angular Update Guide :
   Ce site a été conçu par la core team de Angular pour nous permettre d'étudier l'impact de notre montée en version en considérant quelques facteurs à savoir la version actuelle de notre projet, la version ciblée pour la mise à niveau, les différents packages maintenus par la core team de Angular que nous avons dans notre projet. Toutefois, il faut aller de façon méthodique avec les instructions que propose ce site.

2. S'assurer de la version de Node.js compatible avec la nouvelle version de Angular ciblée :
   Notre montée en version peut nous contraindre à effectuer une mise à jour de la version de Node.js utilisée. Il ne faut pas hésiter à le faire. Nous pouvons nous rendre ici Angular Version Compatibility - Node.js .

3. Exécuter la commande ng update :
   L'exécution de la commande ng update tout court n'impactera pas notre projet. Cette commande affichera dans notre terminal un terminal avec les dépendances reconnues officiellement par Angular en affichant la version actuelle et la version à atteindre pendant la mise à niveau.

4. Effectuer une montée en version progressive :
   Il est nécessaire de faire une montée en version progressive. Supposons que nous voulons faire une montée en version de Angular 9 vers Angular 16. Il est capital d'y aller pas-à-pas. D'abord, il faut faire une montée en version de 9 vers 10, ensuite de 10 vers 11 et ainsi de suite. La montée en version se fait en une ligne de commande : ng update @angular/core@[version_cible] @angular/cli@[version cible] .

5. S'assurer de la compatibilité des dépendances externes avec la version de Angular :
   Pendant la montée en version progressive, il faut s'assurer que les bibliothèques externes suivent le mouvement. A chaque montée de version, il faut s'assurer que le projet compile bien et qu'il n'y a pas de régression. Il faut vérifier au niveau de la documentation de ces bibliothèques quelle est la version compatible avec notre version de Angular cible.

6. S'attendre à faire de la réécriture de code si NgRx est utilisée :
   Si nous utilisons le gestionnaire d'état NgRx dans notre projet, nous devons vérifier de façon miticuleuse que nous n'avons pas à réécrire nos Effects par exemple. En effet, la bibliothèque dans sa mise à jour est passée des décorateurs aux fonctions create pour faciliter l'implémentation des Actions, Reducers, Effects, etc.

7. Effectuer du "forcing" quand il le faut :
   Lorsque nous rencontrons une bibliothèque développée en Angular dont le package @angular/core ou @angular/common est obsolète par rapport à ce que nous avons dans notre projet, la commande ng update énoncée dans le point 4 n'ira pas au bout. Pour y remédier, nous devons pousser un peu plus loin notre investigation. Il faut lire le code source de cette bibliothèque pour analyser les impacts lors de l'ajout de --force dans notre commande du point 4. Si notre bibliothèque qui coince n'a pas d'autres dépendances à part Angular alors il n'y aura pas d'incidence. Dans le cas contraire, il faudra réfléchir à un palliatif.

8. Lire et bien comprendre les warnings et problèmes qui s'affichent dans le terminal et la console de notre navigateur :
   Lors de la montée en version, nous devons être très attentif à ce qui s'affiche dans notre terminal et dans la console de notre navigateur.

9. Vérifier la compatibilité avec les navigateurs obsolètes :

   Après la montée en version, il y a des versions de navigateurs qui ne sont pas prises en charge. Notre application risque de ne pas fonctionner sur ces navigateurs. Nous pouvons vérifier la compatibilité ici Browser Support. Toutefois, avec BrowsersList déjà présent dans notre projet, on peut étendre les versions de navigateurs que nous souhaitons en le couplant avec les polyfills.

Pour finir, il est à souligner que la CLI (Command-Line Interface) de Angular aide beaucoup dans la montée en version. En effet, elle s'occupe même de modifier le contenu de nos fichiers quand il le faut. Beaucoup de choses se passent de façon transparente. C'est vraiment intéressant pour l'expérience développeur. Aussi, il n'est plus à rappeler, qu'il faut versionner son code. Le code même obsolète qui fonctionne déjà doit être bien conservé en cas de rollback.

En somme, nous avons fait un tour d'horizon des points essentiels pour réussir sereinement notre montée en version. La patience et la concentration sont les qualités à avoir pendant cette épreuve.

Pour plus d'informations :

👉 Angular Update Guide

👉 Angular Version Compatibility - Node.js - RxJS

👉 Browser Support

👉 BrowsersList

👉 NgRx Docs