Mettre à jour vers Angular 6

Publié le

Angular 6 est disponible ! Voici un guide complet de migration pour mettre à jour vers Angular 6 facilement.

Mettre à jour vers Angular 6 pas à pas

Commencez déjà par vous assurer que votre projet est à jour : vous devez avoir déjà réalisé les précédentes modifications indiquées dans le changelog.

Il y a ensuite un guide officiel de mise à jour. Revoici les étapes principales :

Commencez par mettre à jour la version globale du CLI :

npm install @angular/cli -g

Puis mettez à jour la version locale du CLI :

npm install @angular/cli

La configuration du CLI a radicalement changé. Mais pas de panique, il y a une commande de migration automatique :

ng update @angular/cli

Enfin, mettez à jour Angular, TypeScript, RxJS et Material :

ng update --all

Le CLI va d’abord vérifier la compatibilité des dépendances. Si des problèmes sont signalés, mettez à jour vos librairies tierces d’abord. Si certaines ne sont pas encore à jour avec Angular 6, il faudra relancer la commande avec l’option --force (la plupart des librairies en version 5 devraient continuer à fonctionner avec Angular 6, même si leurs peerDependencies ne sont pas à jour).

Et voilà ! Un projet classique devrait continuer à fonctionner immédiatement, sans problème de rétro-compatibilité. Pour des options particulières, vous trouverez ci-dessous quelques détails à adapter.

Angular 6

Du côté du coeur d’Angular, aucune cassure de rétro-compatibilité à noter de notre côté. On ne vous avez pas menti en disant qu’Angular 2, 4, 5 et 6, c’est la même chose !

Tree-shakable providers

Angular 6 introduit une nouvelle façon à la fois plus simple et plus performante de fournir les services. Pas de panique : l’ancienne façon de faire fonctionne toujours.

En revanche, pour vos prochains services, vous devez vous conformer à cette nouvelle façon de faire :

ng g service hello

Notez que l’option --module a disparu. Vous verrez qu’un paramètre est maintenant ajouté au décorateur Injectable, qui permet au service de s’auto-fournir.

Cela signifie qu’il n’y a plus besoin de fournir le service dans un module, il suffit de l’injecter dans le constructeur d’une autre classe pour pouvoir l’utiliser.

RxJS 6

Les imports ont été grandement simplifiés. Il n’y maintenant plus que deux imports :

  • rxjs tout court pour Observable et toute autre chose créant un Observable (of…)
  • rxjs/operators pour les opérateurs que vous utilisez dans .pipe()

Pas de panique : le CLI a installé pour vous rxjs-compat, qui fait en sorte que les anciens imports fonctionnent toujours !

Mais ce n’est pas idéal pour les performances, donc dès que vous aurez quelques minutes, il existe un outil pour automatiser le refactoring. Une fois terminé et que plus aucune librairie tierce n’en a besoin :

npm uninstall rxjs-compat

Angular CLI 6

Nouveaux projets

Si vous avez besoin d’un proxy, l’option se gère désormais dans :

"serve": { "options": { "proxyConfig": "proxy.conf.json" } } }

Le script npm de build n’est plus en mode production par défaut. A vous de créer votre script de production, par exemple :

"prod": "ng build --prod"

Projets existants

Certaines options en ligne de commande ont été renommées, notamment :

  • locale > i18nLocale
  • missingTranslation > i18nMissingTranslation

Egalement certains raccourcis, notamment :

  • -it (pour --inlineTemplate) > -t

Ainsi que certaines commandes avancées (notamment Universal). Référez-vous au Wiki du CLI.

Progressive Web App

Plus besoin d’avoir anticipé, si vous souhaitez profiter du mode hors ligne dans une application existante :

ng g service-worker

Si vous souhaitez une Progressive Web App complète, tout est désormais automatisé, y compris le manifest.json :

ng add @angular/pwa

Découvrez la formation Angular