Quoi de neuf dans Angular 12

Jetons un coup d'œil à certaines des nouvelles fonctionnalités d'Angular dans sa version 12.

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web pour mobile ou bureau, a plus de 73 000 étoiles sur GitHub et est maintenu par l'équipe Angular de Google et une multitude de membres et d'organisations de la communauté. La version angulaire 12 a été publiée le 12 mai 2021, c'est vraiment cool ?

Cette mise à jour se concentre sur la consolidation d'Ivy avec le mandat Ivy Everywhere et la plupart des nouvelles fonctionnalités sont destinées à cela. [19659004]Ivy Everywhere

La première chose à noter est que View Engine, qui était le moteur de rendu par défaut d'Angular avant Ivy, est maintenant officiellement obsolète. Cela fait d'Ivy le nouveau moteur de rendu Angular pour tous les nouveaux projets Angular à partir de la version 9.

Cela signifie que dans la prochaine version majeure d'Angular, le moteur de vue sera supprimé d'Angular. Les bibliothèques actuelles utilisant View Engine fonctionnent toujours de manière transparente avec les applications Ivy, mais il est conseillé aux auteurs qui possèdent ces bibliothèques de commencer à faire des plans de transition.

Dans la version 12, nous rendrons obsolète notre ancien pipeline de compilation et de rendu appelé View Engine. Ce changement ne nécessitera aucune action de la part des développeurs. Les bibliothèques dépendantes de View Engine continueront de fonctionner comme prévu via notre compilateur de compatibilité ngcc. –  Angular

Comment mettre à niveau vers la version angulaire 12 ?

Comme toujours, le meilleur moyen de mettre à niveau votre projet d'une version à une autre est de consulter le guide officiel de mise à jour angulaire dans le lien ici . Si vous utilisez déjà la version 11, vous pouvez simplement utiliser cette commande dans votre terminal pour mettre à jour un projet vers 12 :

ng update @angular/cli @angular/core

et globalement, vous pouvez exécuter cette commande :

 npm install -g @angular/cli

Au revoir Protractor 👋

Une RFC a été partagée par Angular pour déterminer ce que l'avenir de Protractor devrait évoluer en tant qu'outil de test. Comme vous le savez peut-être déjà, Angular fonctionne bien avec d'autres outils tels que Cypress, WebdriverIO et TestCafe, et l'équipe examine toujours les réflexions et les commentaires de la communauté Angular.

Cependant, une décision a été prise entre-temps de ne pas inclure Rapporteur dans les nouveaux projets angulaires au fur et à mesure que vous les générez. L'équipe est toujours en train de passer en revue, et plus d'informations sur la décision finale sur Protractor sont attendues bientôt, probablement dans la prochaine mise à jour. , avec chaque version, l'apprentissage d'Angular est de plus en plus facile au fur et à mesure. L'expérience d'apprentissage des développeurs pour Angular est une priorité absolue pour eux, et donc les documents Angular sont toujours en cours de travail. Un guide de projection de contenu est maintenant ajouté aux documents, disponible iciavec des exemples intéressants et encore plus de contenu dans les documents à venir.

L'équipe s'assure également que la communication est une voie à double sens. , garantissant que les membres de la communauté Angular peuvent faire partie de cette courbe d'apprentissage facile. À cette fin, il existe désormais un guide du contributeur sur la documentation afin que tout membre de la communauté Angular, comme vous qui lisez ceci, puisse suggérer des améliorations à la documentation. Vous pouvez jeter un œil iciet, si vous avez des suggestions, c'est un moyen facile de contacter l'équipe.

L'une des innovations issues de l'amélioration de la documentation est les nouveaux guides et la section vidéos de la doc. C'est super cool et vous devrez voir par vous-même – les références d'erreur affichent les messages d'erreur et la répartition vidéo de ce qu'il faut faire pour les résoudre. C'est une première pour un document de framework que j'ai vu personnellement, et c'est plutôt cool.

Dépréciation de la prise en charge d'IE11

Internet Explorer tel que nous le connaissons dans ses derniers jours, et la prise en charge d'IE n'a pas été facile tout en construisant pour le web. Plus tôt dans l'année, nous avons vu des applications Microsoft 365 comme Teams interrompre la prise en charge d'IE11 et comment l'équipe Microsoft retirerait entièrement IE de son écosystème dans un an .

Angular se penche également dans la même direction en supprimant la prise en charge des navigateurs hérités comme Internet Explorer. Un nouveau message d'avertissement de dépréciation sera désormais inclus pour IE11 à partir de cette nouvelle version d'Angular. La prise en charge sera entièrement supprimée par la version 13.

Améliorations autour des styles

Quelques améliorations clés ont été apportées au style dans Angular. L'un d'eux est qu'Angular prend désormais en charge le SASS en ligne dans le champ styles de votre décorateur de composants sans avoir à ajouter d'option inlineStyleLanguage à votre fichier angular.json.

La prise en charge de Tailwind CSS est également fournie avec cette version. Voyant à quel point la communauté Tailwind devient populaire, c'est une initiative brillante de l'équipe Angular. Vous pouvez commencer par télécharger le package à partir de npm icipuis initialiser le fichier dans votre projet.

La fusion nulle est là maintenant !

Cette nouvelle version nous donne enfin l'opérateur de fusion nulle (??) afin que nous puissions écrire un code plus propre pour les conditions. Un bon exemple est quelque chose comme ceci :

{{age !== null && age !== undefined ? age : calculateAge() }}

Ce qui se transforme en quelque chose de beaucoup plus propre :

{{ age ?? calculateAge() }}

Mettez à jour votre application Angular et vous pouvez commencer à utiliser cet opérateur immédiatement pour simplifier vos instructions conditionnelles. Cet opérateur TypeScript est disponible depuis un certain temps maintenant, et son entrée dans Angular le rend encore plus amusant et utilisable pour des milliers de développeurs qui utilisent déjà Angular. avec la migration des anciens formats d'ID de message i8n vers de nouveaux. Les anciens ont eu des problèmes à plusieurs reprises concernant l'espacement des blancs, les expressions ICU et les modèles de formatage. Le nouveau est beaucoup plus intuitif et canonique, et réduit ainsi les invalidations qui proviennent de mauvaises traductions ou de retraductions qui ne correspondent pas à des choses comme les espaces blancs. Ces modifications sont entrées en vigueur à partir de la version 11, et des outils ont désormais été créés pour migrer également les projets existants.

Conclusion

Ceci a été un aperçu des nouvelles fonctionnalités fournies avec la dernière version d'Angular, 12.0. Pour moi, l'opérateur nul est ma fonctionnalité préférée, et les vidéos sympas maintenant disponibles dans les documents angulaires sont juste derrière. Quels sont les vôtres ?