Comment mettre à jour Angular vers une nouvelle version (5, 6, 7...) ?
Le framework Angular a connu un rythme rapide d'évolution ces derniers mois. Alors que la version 5 est sortie le 1er novembre 2017, deux versions majeures lui ont succédé en l'espace d'un an. La version 6 est sortie le 4 mai 2018 et la version 7 le 18 octobre de la même année. Si votre installation est antérieure à la version 6, il faut effectuer quelques manipulations supplémentaires. Pour les installations en version 6 ou supérieures, la mise à jour d'Angular est simplifiée.
La sortie de la version 6 du framework Angular marque des ruptures dans certains logiciels et librairies demandés par le framework. Il y aura donc des modifications à faire si vous souhaitez mettre à jour Angular à partir d'une version plus ancienne. À partir de la version 6, Angular nécessaire au minimum la version 8.9 de NodeJS. Il faudra donc que Node soit mis à jour vers cette version ou une version supérieure. Vous devez ensuite mettre à jour le client Angular globalement.
npm install -g @angular/cli
Ensuite, vous devez mettre à jour le client Angular installé dans chacun de vos projets. Il faudra se rendre dans le répertoire du projet et exécuter les commandes suivantes :
npm install @angular/cli ng update @angular/cli
On peut ensuite lancer la mise à jour de tous les paquets du framework vers la version 6. Exécutez la commande suivante :
ng update @angular/core
Il faut mettre à jour les composants du Material Design d'Angular. On utilise la commande suivante pour réaliser cette opération :
ng update @angular/material
Le framework Angular utilise la librairie RxJS dans son code. Lors du passage à la version 6, de nombreux éléments de la librairie sont modifiés. Un nouveau paquet, "rxjs-compat" est installé pour assurer la compatibilité, mais nous vous conseillons de migrer votre configuration pour avoir un code plus simple et pouvoir supprimer ce paquet. Pour effectuer la migration, il faut d'abord installer avec NPM le paquet "rxjs-tslint".
npm install -g rxjs-tslint
La commande suivante va adapter votre configuration pour fonctionner nativement avec la version 6 de la librairie.
rxjs-5-to-6-migrate -p src/tsconfig.app.json
Il ne reste plus qu'à supprimer le paquet "rxjs-compat" devenu inutile afin de gagner de la place :
npm uninstall rxjs-compat
La commande finale "ng serve" vérifiera que votre mise à jour s'est correctement déroulée.
À partir de la version 6, la mise à jour d'Angular est beaucoup plus simple. Il ne reste plus que 3 commandes à utiliser : celle qui met à jour le client Angular, suivie de la commande qui met à jour tous les paquets du Framework. La dernière met à jour les composants du Materiel Design.
ng update @angular/cli ng update @angular/core ng update @angular/material
Conscients que la mise à jour du framework n'est pas simple, les développeurs du framework ont créé un site dédié à ce processus : https://update.angular.io/. Vous pouvez renseigner différentes informations sur votre installation : version de départ, d'arrivée, complexité de l'application, gestionnaire de paquets utilisé et le site vous édite un mode d'emploi à suivre pour mettre à jour votre installation.