De Angular 6 à Angular 7

Angular 7 vient juste d'être disponible, nous allons donc tester si la migration se passe sans douleurs.

Bien entendu, je partirai d'une application Angular 6 qui a été développé à partir d'Angular CLI (cela devient du suicide de faire autrement aujourd'hui).

NB : la doc d'angular/cli - qui était quasi inexistante - fait partie maintenant du site officiel d'angular : https://angular.io/cli

C'est une application moyennement complexe, qui utilise @angular/material et @angular/flex-layout pour l'UI.

Il s'agit de https://www.gs-tennis.com, l'application qui permet de gérer les matchs par équipe de son club de tennis, application développée en collaboration avec la FFT.

La première étape est simple, juste lancer un script angular/cli :

ng update @angular/cli @angular/core

Résultat : il me modifie mon fichier package.json et met à jour tout ce qui fait partie du framework angular comme le montre la capture ci-dessous (remarquez que l'on passe en Typescript 3.1.3, bonne nouvelle ;-)) :

J'essaye alors une compilation : arg! j'ai des erreurs et elles proviennent de angular/flex-layout.

J'en profite donc pour mettre à jour les autres packages que ceux du framework Angular. Un :

npm outdated

me permet de lister les packages qui sont "périmés".

ATTENTION : n'essayez pas de mettre à jour tous vos packages d'un seul coup, il est préférable de le faire progressivement pour s'assurer de la compatibilité.

Je vais donc dans un premier temps mettre à jour uniquement material et flex-layout.

"@angular/cdk": "^7.0.0",
"@angular/material": "^7.0.0",
"@angular/flex-layout": "^7.0.0-beta.19",

Suivi d'un :

npm update

ou vous pouvez faire également un :

ng update @angular/material

ng update @angular/cdk

ng update @angular/flex-layout

Je peux donc maintenant réessayer de compiler, et cette fois, cela fonctionne.

Je n'ai plus qu'à faire la mise à jour des packages qui me restent. Je pense notamment aux packages suivant (présents dans tous les projets cli et source de warning de sécurité avec npm) :

"@angular-devkit/build-angular": "^0.10.1",
"@types/node": "~8.9.4",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.4",
"karma-jasmine-html-reporter": "^1.3.1",
"ts-node": "~7.0.1",

Quid du résultat côté taille des fichiers générés ?

Je ne dirais pas que mon test est représentatif mais j'ai des fichiers qui sont légèrement plus imposants (sans doute parce que @angular/material devient plus important).

Conclusion

Le passage à Angular 7 s'est passé sans douleur pour ma part (ce qui n'était pas le cas entre la 5 et la 6 avec la migration de rxjs).

Pour des projets dits professionnels, je vais encore attendre quelques semaines mais cela semble prometteur.

Quelques petites remarques avant de partir...

Vous aurez remarqué que pour la sortie de cette version 7, l'équipe d'Angular communique non seulement sur les mises à jour du framework mais sur @angular/material et @angular/cdk et ses nouveaux composants (NB : pour le nouveau compilateur ivy, faudra attendre encore un peu).

On sent qu'ils poussent Material de façon intensive.

Déjà la 7 mais la 6 vient à peine de sortir ?!!! Je vous rassure, c'est juste une phylosophie de numérotation qui est propre à Google (Chrome en est à la v70).

Maintenant la question est : pensez-vous que 4.7.2.12568 est plus lisible que 7 ? Faut juste changer ses habitudes ;-)

Flex-Layout est toujours en beta ! Je m'interroge un peu sur ce package ou il n'y a pas grand monde de mobilisé dessus (1 pers chez Google ?). La réponse a ce qu'il soit toujours en beta est que toutes les fonctionnalités imaginées pour ce package ne sont pas encore implémentées.

Ok, mais allez-dire à votre chef de projet que vous voulez utiliser un package en beta et vous verrez sa réponse !!!

De plus, rien qu'à voir comment sont gérés les branches et les tags sur ce package, et on a l'impression qu'onb a affaire un un gars qui a très froid et qui utilisent des moufles. Je dis ca, je dis rien...

Dommage car ce package était vraiment prometteur.

blog comments powered by Disqus