Des tailles de bundle plus petites, des temps de construction améliorés et un meilleur débogage ne sont que quelques-unes des nouvelles améliorations disponibles dans Angular 9, la dernière version majeure du framework SPA (Single Page Application) de Google.
Ces améliorations se produisent grâce à la release très attendue du moteur de rendu Ivy mis au point par Google depuis 2018.
Comme le nombre de changements et d'améliorations dans cette version est assez important, nous nous concentrerons sur les changements les plus importants. Des informations supplémentaires sur la version peuvent être trouvées dans l'annonce officielle sur le blog Angular.
Taille des bundles réduite
Le compilateur Ivy améliore la façon dont Angular gère les composants en réduisant la taille des fichiers produits. De plus, Ivy utilise le tree shaking, ce qui lui permet uniquement d'inclure les parties d'Angular nécessaires pour l'application.
Selon Google, ces améliorations peuvent réduire la taille du bundle jusqu'à 40%. Cependant, ces améliorations ciblent spécifiquement les petites applications (qui n'utilisent qu'un sous-ensemble limité de capacités angulaires) et les grandes applications (qui souffrent de grandes tailles).
Il serait intéressant de voir comment la réduction de la taille des bundles affecte la création de Web Components utilisant Angular. Bien que la capacité de créer des Web Components soit présente depuis un certain temps, la taille des composants résultants était généralement trop grande pour être considérée comme utile.
Processus de build amélioré
Le compilateur Ivy permet une compilation plus rapide des applications Angular (Google a vu une amélioration de ~ 40% avec son application de documentation angular.io).
Outre l'avantage évident de temps de compilation plus rapides, le nouveau processus a également permis à Angular de commencer à utiliser la compilation AOT (ou Ahead of Time) pendant le processus de développement (lors de l'utilisation de ng serve). Jusqu'à récemment, la compilation AOT était limitée aux builds de production en raison du long temps de compilation, ce qui entraînait des cas marginaux où les builds passaient en développement, mais échouaient en production.
Le nouveau processus de construction comprend deux améliorations finales - il supprime la nécessité d'utiliser le tableau 'entryComponents' dans la définition du NgModule qui était nécessaire lors de la génération de composants dynamiques et il comprend une gestion améliorée des erreurs, ce qui devrait simplifier le processus de débogage.
Meilleur débogage
Lors de l'exécution d'applications Angular en mode debug, Ivy expose un ensemble de nouvelles fonctionnalités sur l'objet global ng qui permet aux développeurs d'appeler manuellement les méthodes, de mettre à jour l'état / la détection de changement d'état et d'accéder aux instances de vos composants.
Ivy améliore également la stack trace fournie lorsqu'Angular rencontre une erreur, fournissant des liens plus précis vers les portions de code / templates incriminés.
Mise à niveau vers Angular 9
La mise à niveau d'Angular 8 vers Angular 9 est simple.
Tout d'abord, mettez à jour vers la dernière version de 8 :
ng update @angular/cli@8 @angular/core@8
Ensuite, passez à 9 :
ng update @angular/cli @angular/core
Un guide de mise à niveau plus complet est disponible à l'url https ://angular.io/guide/updating-to -version-9