Sélectionner une page

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

Graph showing how Ivy improves app size
source: https://blog.angular.io/

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
source: https://blog.angular.io/

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