Angular 9 est disponible depuis le 6 février est fait un énorme bond en avant en terme de nouveauté. Je vous propose dans cette article de faire le tour de toutes ces nouvelles pépites 🙂
Le projet Ivy
Ivy est le nouveau moteur de compilation et de rendu d’Angular. Proposé depuis la version 8 en mode bêta, elle est cette fois ci opérationnel et activé par défaut sur les nouveaux projets ou lorsque vous faite une migration. Voyons ensemble certain de ses avantages :
Une réduction de la taille du build
Le compilateur Ivy recherche les parties de votre projet Angular qui ne sont pas utilisées. Il utilise le tree-shaking (un moyen de détecter le code inutilisé, également appelé dead-code-removal) et génère moins de code pour chaque composant Angular
Un build plus rapide
Grâce à la nouvelle architecture d’Ivy, les performances du compilateur ont considérablement été amélioré.
Par exemple pour l’application de documentation (angular.io), il y a une une amélioration de près de 40% avec Ivy .
Ces améliorations signifient que les builds AOT peuvent être sensiblement plus rapides et que grâce à cette accélération, nous pouvons tester notre versions de dev en mode AOT.
«ng serve» bénéficie désormais de la même vérification au moment de la compilation que les versions de production, améliorant considérablement l’expérience du développeur pour Angular.
Grâce aux modifications apportées au compilateur et à l’exécution, nous n’avons également plus besoin de entryComponents. Ces composants seront découverts et compilés automatiquement a leur utilisation.
Une meilleur visibilité des erreurs
Le nouveau compilateur Ivy est non seulement plus rapide et offre une plus grande sécurité de type, il rend également tous les messages d’erreur plus faciles à lire.
Dans la version 8 ou View Engine, une erreur de compilation typique ressemblerait à ceci:
Dans la version 9 avec Ivy, la même erreur ressemble à:
Les nouveaux outils de débugging
Lorsque vous exécutez une application en mode Dev avec le runtime Ivy. Avec le nouvel outil ng object il est maintenant possible de :
- Demander a Angular d’avoir l’accès aux instances de nos composants, directives, etc.
- Appeler manuellement des méthodes et mettre a jour son état.
- Déclencher la detection des modifications avec un ng.applyChanges
Le passage à la version 3.7 de TypeScript
Angular a été mis à jour pour fonctionner avec TypeScript 3.6 et 3.7, y compris la fonction de chaînage facultative extrêmement populaire de TypeScript 3.7. Pour rester en phase avec l’écosystème d’autres dépendances telles que Zone.JS et RxJS ont aussi été mis à jour.
// AVANT
let nestedProp = obj.first && obj.first.second;
// APRES
let nestedProp = obj.first?.second;Quel sont les nouveaux composants ?
- Google Map Component
- Youtube Player Component
Comment mettre à jour ?
Pour commencer n’hésiter pas à crée une nouvelle branche, bien que la version d’Angular 9 soit stable, rien ne garantie que les librairies que vous utiliser soit compatible avec cette nouvelle version.
Ensuite rien de plus simple que de passer par l’outil de migration d’angular nommé ng update. Vous trouverez un tutoriel étape par étape pour faire votre migration ici : https://update.angular.io/.
Nous vous recommandons si ce n’est pas le cas, de d’abord mettre a jour votre application jusqu’a Angular 8, puis ensuite de faire la migration sur la version 9.
Comment faire pour désactiver ivy ?
Si vous souhaitez mettre à jour Angular a la version 9 sans vouloir utiliser le nouveau moteur de compilation ivy. Il est tout a fait possible de désactiver en modifiant le fichier tsconfig.app.json
Source : https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3