La version 9 d’Angular est sortie le 7 février 2020 ! Concrètement, cela signifie qu’il est maintenant temps de voir ce que cette nouvelle version du Framework propose, et comment mettre à jour nos applications sans rien casser. Allez, hop, au boulot !

Note : Angular 9 a de nouveaux pré-requis, Node 10.13+ et TypeScript 3.6+ pour être exact. Bien sûr, l’ensemble du contenu du site et des formations ont été mis à jour en conséquence. De votre côté, vérifier simplement que vous avez bien une version correct de Node : node -v. Si ce n’est pas le cas, réinstaller simplement Node.js sur votre poste de travail.

Comme souvent avec les nouvelles mises à jour d’Angular, il n’y a pas de grand changement à effectuer dans notre code (et heureusement !). Il s’agit surtout d’optimisations internes du Framework, qui améliorent la performance et la rapidité de notre application. Il suffit donc de mettre à jour nos applications Angular pour bénéficier de ces améliorations.

Dans cet article, nous allons voir comment mettre à jour votre application Angular (qui doit surement être en version 8 actuellement), vers cette nouvelle version 9. Vous gagnerez en performance dans votre application, tout en bénéficiant des dernières évolutions. 👍

Les nouveautés d’Angular 9

Le compilateur de template « Ivy » est maintenant disponible par défaut

C’est l’évolution la plus importante de cette version 9 d’Angular. Si vous ne deviez en retenir qu’une, cela devrait être celle-ci.

Lors de la dernière évolution d’Angular (la version 8), les équipes d’Angular ont mis en place un compilateur de templates beaucoup plus rapide. Sans rentrer dans les détails techniques, Ivy permet de générer des morceaux de votre application plus compacts et plus petits, et rend Angular plus rapide.

Cependant, Ivy n’était pas encore très stable lors de la version 8 d’Angular. Mais désormais, il est définit en tant que compilateur par défaut, car il n’est plus en phase d’essai.

Il n’y a donc rien de spécial à configurer ou à installer. En passant sur la version 9 d’Angular, vous gagnerez en performance dû à l’utilisation interne de Ivy, et c’est tout. 👍

Un autre avantage d’Ivy, c’est qu’il fonctionne de la même manière pendant le développement et en production. Du coup, finis les mauvaises surprises où votre code ne fonctionnait que sur votre poste de travail en local !

Le chargement paresseux

Dans Angular 8, les importations dynamiques sont devenus la norme pour le chargement paresseux de vos modules. Mais il était encore possible d’utiliser des chaînes de caractères. C’est maintenant « interdit » :

// Lazy Loading déprécié :
loadChildren: './path/lazy.module#LazyModule'

// Lazy Loading avec Angular 9
loadChildren: () => import('./path/lazy.module').then(m => m.LazyModule)

Vous ne savez pas ce qu’est le chargement paresseux ou « lazy loading » ? Vous savez que vous passez à côté de la recommandation n°1 de Google pour optimiser votre application Angular ? Heureusement, vous pouvez vous pré-inscrire à la formation avancée Angular, « Maîtriser Angular : Réussir votre prochain projet en entreprise. »

Autres modifications internes

Il y a plusieurs autres évolutions dans cette nouvelle version d’Angular 9. Comme ce sont des modifications plus mineures, je vous propose de les voir un peu plus rapidement :

  • Si vous utilisiez l’internationalisation dans votre application, vous devez désormais utiliser le paquet @angular/localize. Notez que si une de vos dépendances utilise l’internationalisation sans que vous le sachiez (comme ng-bootstrap par exemple), vous devez également installer ce paquet : ng add @angular/localize.
  • L’injection de dépendances à été légèrement amélioré. Auparavant, il était possible d’utiliser uniquement la valeur root ou un module Angular, dans l’option providedIn de du décorateur @Injectable. Désormais, vous pouvez passer les valeurs platform et any. La première option permet de fournir une instance unique du service dans chaque module qui utilise cette option. La seconde option est utile si vous avez plusieurs éléments Angular sur la même page, et que vous souhaitez qu’ils partagent une même instance d’un service.
  • Avant Angular 9, la librairie Hammer.js était intégrée directement dans Angular, même si elle n’était pas utilisée. Pour gagner en performance, cette librairie a été retiré, et vous devez importé explicitement le module HammerModule dans votre module racine si vous souhaitez continuer à l’utiliser (Hammer est une librairie simplifiant les gestures dans votre application web : glisser, zoomer, faire pivoter, etc).

Comment mettre à jour le code de « Apprendre Angular » ?

C’est assez simple. Pour mettre à jour votre application, utilisez le nouveau fichier package.json qui contient les dépendances nécessaires pour Angular 9. Vous trouverez ce fichier sur la page des ressources du cours.

Ensuite, supprimez le dossier node_modules de votre application, qui continent les anciennes dépendances.

Réinstaller enfin les nouvelles dépendances, avec la commande suivante :

npm install

Et c’est tout, l’application de Pokémon est à jour pour Angular 9 ! 🙂

Comment mettre à jour le code de « Maîtriser Angular » ?

Angular CLI nous file un coup de main non négligeable pour la migration de notre application Angular vers la version 9 :

ng update @angular/core@8 @angular/cli@8 # On passe sur la dernière version d'Angular 8, pour faciliter la mise à jour.
ng update @angular/core @angular/cli # On migre sur Angular 9

Et c’est tout ! C’est fait, vous êtes à jour pour la version 9. 

Angular CLI a même automatiquement modifié le code qui n’était plus à jour concernant le lazy loading. Les dépendances ont également été mises à jour, comme TypeScript en version 3.7. Si vous avez quelques problèmes suite à l’exécution de la commande, supprimez votre dossier node_modules, et réinstaller vos dépendances. Cela ne peut pas faire de mal, et cela évite les mauvaises surprises.

NOTE : Pour une procédure de migration plus détaillée, jetez un coup d’oeil à l’outil de migration Angular développé par les équipes de Google.

Conclusion

Angular 9 apporte de nouvelles améliorations pour nos applications web, qui seront légèrement plus performantes suite à cette mises à jour. Les changements sont majoritairement internes, et ne nécessitent pas beaucoup de travail de notre côté. La migration de version se fait donc plutôt rapidement et facilement. On ne peut que saluer le travail effectué par les équipes en charge du développement d’Angular. Et bien sûr, on attend la suite avec impatience ! 

Sources 

Non, je n’ai pas découvert seul toutes ses nouveautés. Je m’appuie sur le travail d’autres développeurs bien plus talentueux, et je synthétise tout cela de manière clair et accessible pour tous. Voici mes sources donc, mais tout est en anglais :

https://blog.ninja-squad.com/2020/02/07/what-is-new-angular-9.0/

https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b

https://auth0.com/blog/angular-9-whats-new/