Après un peu plus de 6 mois d’attente, la nouvelle mise à jour majeure d’Angular est sortie : Angular 12. Cette release apporte des améliorations au compilateur, à la validation des formulaires et au service linguistique. Cette version est marquée par l’intégration de la technologie Ivy. Ambient IT revient sur toutes les nouveautés qu’apporte Angular 12.
Nous pouvons vous proposer une formation complète de 5 jours sur Angular et Angular Avancé. Ces formations dispensées par des formateurs expérimentés vous présenteront les dernières versions du framework JavaScript.
L’équipe d’AMBIENT IT
Comment mettre à jour ma version d’Angular ?
Il suffit d’exécuter cette commande pour migrer votre projet sur la dernière version d’Angular à jour :
ng update @angular/core@12 @angular/cli@12
La commande ng update met automatiquement à jour TypeScript à sa version 4.2. Les versions antérieures à Node 11 ne sont plus acceptées par Angular.
Allez sur update.angular.io pour trouver des informations plus détaillées. Nous recommandons toujours de mettre à jour le programme, une version à la fois, afin d’éviter les problèmes de compatibilité.
Les nouveautés d’Angular 12
Cette version majeure est sortie le 19 mai 2021. Comme évoqué précédemment, cette mise à jour s’inscrit dans la volonté d’intégrer la nouvelle génération de compilateur et de runtime Ivy.
Améliorations concernant le compilateur
- Les fichiers source redirigés améliorent la performance du compilateur CLI
- Une aide supplémentaire pour la transformation des ressources de styles des components
- Un renforcement de la sécurité pour le compiler-cli grâce une option « context ». Cette fonctionnalité configure les intercepteurs dans le client HTTP lors de chaque requête.
- Les diagnostics pour suggérer l’activation de strictTemplates, fournissant un moyen pour le serveur du langage de récupérer les diagnostics des options du compilateur.
- De nombreux bugs corrigés affectant le compilateur
Le nouveau format canonique pour les ID de messages
Auparavant, Angular utilisait de nombreux ID de messages héritées déployés à partir d’un système i18n. Ces ID posaient problème car leurs formats n’étaient pas suffisamment stables. Le nouveau format est beaucoup plus robuste.
Pour migrer les ID hérités i18n
1) Lancez la commande ci dessous :
ng extract-i18n --format=legacy-migrate
2) Mettez à jour les ID en utilisant la commande npx localize-migrate :
npx localize-migrate --files=*.xlf --mapFile=messages.json
3) Confirmez la mise à jour sur le système de contrôle source
4) Si ce n’est pas déjà fait, mettez l’option enableI18nLegacyMessageIdFormat du compilateur Angular sur false.
Pour trouver plus d’informations concernant la migration des ID hérités i18n. Vous pouvez consulter l’article d’Angular ce sujet.
L’opérateur de coallescence des nuls
Angular intègre un nouvel opérateur présent sur JavaScript, la coalescence des nuls. Cet opérateur permet de déclencher une fonction si une variable n’est pas nulle ou indéfinie.
Avec cette nouveauté, les développeurs seront plus efficaces car la quantité de codes sera réduite.
Angular délaisse Internet Explorer
Comme l’aventure Internet Explorer prendra fin en 2022. Les développeurs du framework ont décidé de déprecier la compatibilité avec le navigateur. Un message d’avertissement est désormais affiché. Internet Explorer ne devrait plus être pris en charge dans Angular 13.
Mise à jour de l’API Sass
Une nouvelle API Sass est disponible, elle peut être utilisée avec la syntaxe @use. Grâce à cette innovation, vous pourrez créer du style avec du SCSS inline.
Vos applications migreront automatiquement sur la nouvelle API lorsque vous mettrez le framework à jour Angular.
Autres changements
- Le mode CLI strict est activé par défaut
- Support de Webpack 5 en développement
- Prise en charge de Typescript 4.2
- Angular Dev Tools disponible pour Google Chrome
- Pour les animations, les éléments du DOM sont correctement supprimés lorsque la vue root est supprimée
- Les méthodes inutilisées ont été supprimées du DomAdapter
- L’option emitevent a été ajoutée pour FormArray et FormGroup
- La méthode appendAll() peut être utilisée sur HttpParams
- Pour les formulaires, vous pourrez utiliser les validateurs min et max
- Pour aller plus loin, vous pouvez consulter la liste complète de tous les derniers changements dans le changelog officiel du projet Angular
