Après un peu plus de 4 mois d’attente, la nouvelle release majeure d’Angular est sortie : Angular 11. Plus rapide que les cycles habituels de 6 mois, cette nouvelle livraison n’apporte que peu de changements importants par rapport à Angular 10. Par contre, cette version ajoute plusieurs fonctionnalités mineures, notamment une amélioration de l’i18n ou encore l’évolution des Pipes. Ambient IT revient sur toutes les nouveautés qu’apporte Angular 11.
Nous pouvons vous proposer une formation complète de 5 jours sur Angular et Angular Avancé. En ces temps de confinement, nos classes seront maintenues uniquement en Classe Virtuelle. Mais, pas de panique ! Nous travaillons comme des fous pour délivrer une meilleure expérience qu’en présentiel !
L’équipe d’AMBIENT IT
Comment mettre à jour ma version d’Angular ?
Comme pour les autres versions, il suffit d’exécuter une seule commande pour migrer votre projet sur la dernière version d’Angular à jour :ng update @angular/cli @angular/core
Cette simple ligne de commande vous permettra de travailler sur la dernière version d’Angular et ainsi avoir accès aux nouvelles fonctionnalités et aux corrections de bugs.
Allez sur update.angular.io pour trouver des informations plus détaillées. Nous recommandons toujours de mettre à jour une version majeure à la fois afin d’éviter les problèmes de compatibilité.
Les nouveautés d’Angular 11.0
Cette version majeure est sortie le 11 novembre 2020. Comme dit précédemment, contrairement aux autres releases, Angular 11.0 ne propose pas de nouvelles fonctionnalités importantes mais ajoute différentes petites améliorations :
Router
Angular 11 voit une amélioration des performances de son router. Le router d’Angular 11 change la valeur par défaut du relativeLinkResolution par « corrected » au lieu de « legacy ».
La migration met à jour les configurations RouterModule qui utilisent la valeur par défaut pour utiliser désormais « legacy » afin d’éviter les ruptures pendant la mise à jour.
RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'legacy' })Pour le refactoring du code du router, le type de paramètre pour navigationByUrl et createUrlTree a été ajusté pour être plus pertinent (une migration analysera votre code et les supprimera automatiquement si besoin).
Vous pouvez utiliser ngDevMode pour afficher des messages d’erreur si le router ne fonctionne pas correctement.
Une nouvelle fonctionnalité pour i18n
La commande xi18n (renommée extract-i18n dans CLI v11) utilise maintenant 2 algorithmes différents pour calculer les ID des messages dans une application : un ancien algorithme pour les messages du modèle (basé sur ViewEngine) et une version moderne pour les messages codés.
Prise en charge de TypeScript 4.0
Angular gagne en puissance en supportant le TypeScript 4.0. La prise en charge de TypeScript 3.9 est quant à elle abandonnée.
Les erreurs de codage
Désormais, Angular affichera ces erreurs de codage :
- NG0100: “ExpressionChangedAfterItHasBeenCheckedError” (change detection error)
- NG0200: “Circular dependency” (dependency injection error)
- NG0201: “No provider for X” (dependency injection error)
- NG0300: “Multiple components match node with tagname X” (template error)
- NG0301: “Export of name X not found” (template error)
- NG0302: “The pipe X could not be found” (template error)
- NG0303: “Can’t bind to X since it isn’t a known property” (template error)
- NG0304: “X is not a known element” (template error)
Cela aidera les développeurs à trouver des informations pertinentes sur ces fautes.
Service Workers
Une notification d’erreur UnrecoverableStateError est ajoutée, elle permet de savoir si votre application a atteint un état irrécupérable.
Cette notification se déclenche lorsque toutes les parties d’une application ne se chargent pas correctement. Il peut arriver que le prestataire de services ne trouve pas une ressource en cache (peut-être parce que le navigateur l’a supprimée) ou que le serveur ne l’ait plus (peut-être parce que vous avez déployé une nouvelle version de l’application).
Trusted Types
Angular se dote d’une nouvelle API standard pour les navigateurs. qui peut aider les développeurs à prévenir les attaques XSS via l’injection DOM. Celle-ci permet de prévenir les attaques XSS via l’injection DOM.
En effet, les navigateurs qui prennent en charge les Trust Types peuvent avertir les développeurs lorsqu’ils exécutent des opérations DOM dangereuses (par exemple, en utilisant innerHTML). Vous pouvez également collecter ces violations en ajoutant un header CSP au document, cela permettra d’indiquer au navigateur où collecter ces informations.
Vous pouvez alors résoudre ces violations, utiliser cette nouvelle API pour déclarer une policy ou utiliser cette policy comme une factory pour créer un contenu de confiance. Lors de la déclaration d’une policy, tout contenu dangereux doit être traité par la factory créée pour assurer sa sécurité.
Automatic font inlining
Pour rendre les applications plus rapides et répondre aux attentes de Google concernant le Core Web Vitals. Cette nouvelle fonctionnalité (activée par défaut) permet à Angular CLI de télécharger et mettre en ligne les polices utilisées et liées à l’application.
Experimental webpack 5 Support
Vous pouvez désormais utiliser webpack v5. Néanmoins, ce support est expérimental et en cours de développement, c’est pourquoi nous ne recommandons pas de l’utiliser pour la production. Webpack 5 apporte :
- De meilleur performance en construction avec la mise en cache et le stockage de blocs durable
- De plus petits bundles grâce à cjs tree-shaking
- Amélioration de la mise en cache à long terme grâce à de meilleurs algorithmes
- Une meilleur compatibilité avec les plateformes web
Si vous voulez utiliser webpack 5, il suffit d’ajouter ce code au package.json file :
"resolutions": {
"webpack": "5.4.0"
}Pipes
Le date pipe (et sa fonction formatDate associée) peut désormais obtenir le numéro de semaine spécifié par la norme ISO 8601.
Notez que la plupart des pipelines ont un type de signature plus strict, ce qui devrait nous aider à détecter les erreurs potentielles.
Par exemple, date acceptait n’importe quelle valeur. Elle n’accepte désormais que le type réel qu’il peut gérer soit Date, string ou number. Lors de la mise à jour, l’utilisation de ces signatures strictes peut entraîner des erreurs de compilation, mais elles peuvent indiquer des problèmes réels avec votre application.
Forms
Les base class des contrôles de formulaire, des groupes et des tableaux ont des propriétés parent qui vous permettent d’obtenir le groupe ou le tableau de formulaires parent.
Le type renvoyé par le parent a été mis à jour depuis FormGroup, FormArray à FormGroup, FormArray ou depuis null (par exemple, pour le groupe de formulaires racine). Cela ne devrait pas vous affecter, mais si vous utilisez control.parent.something ailleurs, vous devez maintenant être conscient de la valeur nulle potentielle de parent.
Lors de la mise à jour, cette fonction sera ajoutée. Lié au code si nécessaire ou si vous utilisez l’option TypeScript « strict empty control » se sera alors control.parent!.something.
ViewEncapsulation
Angular v6.1 a introduit une nouvelle option appelée ShadowDom pour remplacer l’option native obsolète. Il est maintenant temps de dire au revoir à cette machine: elle a été supprimée de la base de code. Lors de votre migration, elle sera remplacée automatiquement par ShadowDom dans votre application.
waitForAsync
Dans la v10.1, l’assistant async() était obsolète et renommé waitForAsync. Vous l’avez donc peut-être déjà remplacé pour vous débarrasser des avertissements TSLint. Mais si vous ne l’avez pas déjà fait, une migration automatique peut le faire pour vous.
Autres changements
- Pour le compilateur Angular, keySpan sera ajouté au nœud Variable.
- Le support est supprimé pour les navigateurs Microsoft IE 9 et IE 10 ainsi que le support mobile d’IE.
- Pour le client du compiler-cli, des interfaces qui peuvent être utilisées pour TemplateTypeChecker sont en cours de définition. Les performances du compiler-cli ont également été améliorées.
- Amélioration de les opérations Byelog
- Le système est plus rapide (le NGCC est 2 à 4 fois plus rapide)
- Pour aller plus loin, vous pouvez aller jeter un œil sur la liste complète de tous les derniers changements récents dans le changelog officiel du projet Angular, le changelog spécifique 11.0.0 du CLI ainsi que le changelog de composants.
Vous pouvez retrouver les changements d‘Angular 12 dans notre article dédié. Si vous souhaitez un aperçu des ressources disponibles sur l’outil, vous pouvez lire notre article comment se former sur Angular.
