Quoi de neuf dans Angular 11

Examinons de plus près les dernières mises à jour d'Angular 11 et ce qui le rend si rapide, comment vous lissez, enregistrez et insérez les polices, et quelques autres choses aussi.

Angular, le framework JavaScript (TypeScript) de Google pour la création applications Web mobiles ou de bureau, a plus de 68 000 étoiles sur GitHub . Géré par l'équipe angulaire de Google et une foule de membres de la communauté et d'organisations, Angular Version 11 a été publié le 11e jour du 11e mois de 2020. C'est pas cool?

C'est une bonne santé mise à jour car elle touche le framework lui-même, la CLI et même les composants. Dans cet article, nous examinerons les nouvelles et brillantes fonctionnalités fournies avec cette nouvelle version.

Constructions plus rapides

La première chose qu'Angular a constamment fait avec les nouvelles versions est son engagement à optimiser la vitesse. Dans cette nouvelle version, Angular devient encore plus rapide que vous ne le pensez, du développement jusqu'au cycle de construction. Cela a été possible grâce à quelques changements et mises à jour sur des choses comme la compilation, qui utilise maintenant TypeScript 4.0 et des processus plus rapides comme la mise à jour ngcc, maintenant jusqu'à quatre fois plus rapide.

Mises à jour Angular ESLint

Donc, avant cette nouvelle version, Angular toujours implémenté le linting avec TSLint par défaut, mais TSLint est désormais obsolète par les créateurs, qui recommandent de migrer complètement vers ES Lint.

Avec l'aide de nombreux membres de la communauté Angular et James Henry, un chemin de migration tiers a été construit avec typescript-eslint angular-eslint et tslint-to-eslint-config et ceci a été testé pour assurer une transition en douceur pour les développeurs angulaires. Ainsi, à l'avenir, l'utilisation de TSLint et même de Codelyzer ont été déconseillées, ce qui signifie que l'implémentation Angular par défaut pour le linting ne sera plus disponible, mais vous pouvez incorporer angular-eslint dans un projet et migrer depuis TSLint. Vous pouvez en savoir plus ici .

Mises à jour d'Internet Explorer

Cette nouvelle version supprime également tout support pour les anciennes versions d'Internet Explorer versions 9 et 10 et même la version mobile. La seule version d'IE encore prise en charge est la version 11, et les API obsolètes ont également été supprimées.

Webpack 5 Support

Cette nouvelle version est livrée avec un support expérimental de webpack opt-in. Cela signifie que vous pouvez choisir d'utiliser la version 5 de webpack dans votre projet à l'avenir. Angular prévoit de diriger ce chemin et de permettre des builds plus rapides avec une mise en cache vraiment persistante du disque et des tailles de bundle encore plus petites avec l'arborescence cjs. N'oubliez pas que c'est encore expérimental, alors ne l'utilisez pas encore en production. Vous pouvez l'essayer en l'activant dans votre nouveau projet en ajoutant cette ligne ci-dessous à votre fichier package.json:

 "resolution" :   {
      "webpack" :   "5.4.0" 
} 

Vous devez cependant utiliser du fil, car npm ne fonctionne pas encore.

Amélioration de la journalisation et des rapports

Cette nouvelle version d'Angular est également livrée avec de nouveaux changements dans la façon dont les rapports sont effectués sur la phase de construction pendant le développement. De nouvelles modifications ont maintenant été apportées à l'interface de ligne de commande pour rendre les journaux et même les rapports généralement faciles à lire.

Mise à jour de l'aperçu du service de langue

Le service de langage Angular utilisé auparavant pour fournir des outils qui aident à rendre la construction avec Angular amusant était basé sur le moteur de vue. Maintenant qu'Ivy est courant, l'équipe veut que vous voyiez un aperçu de la façon dont les choses fonctionneront avec un meilleur moteur et un meilleur moteur de rendu. Cela vous donne la meilleure expérience Angular haut la main et il sera en mesure de déduire des types génériques dans vos modèles comme le fera un compilateur TypeScript. Regardez l'image ci-dessous pour un bon exemple de déduction du type de chaîne itérable.

Ceci est cependant encore en développement et vous devriez rester à l'écoute quand il sera bientôt publié dans la première annonce de la version 11.x.

Mise à jour du support de remplacement de module à chaud (HMR)

Angular prend en charge le remplacement de module à chaud depuis un moment; cependant, son utilisation avait des exigences qui impliqueraient des changements de configuration qui ne le rendaient pas vraiment génial à inclure dans de nouveaux projets Angular. La CLI a donc dû être mise à jour cette nouvelle version pour activer HMR à partir du saut lorsque vous exécutez ng serve comme ceci:

 ng serve --hmr

Une fois votre application exécutée, vous verrez le message de confirmation indiquant que HMR est actif. Vous devez également vous rappeler qu'il n'est disponible que pour le serveur de développement. Ainsi, au fur et à mesure que vous construisez, vous commencerez à voir les dernières modifications apportées à vos composants, modèles et même vos styles mis à jour instantanément lorsque vous exécutez l'application sans actualisation réelle de la page. C'est bien: cela atteint des éléments tels que les données saisies par les utilisateurs dans les zones de saisie des formulaires. Vous pouvez en savoir plus à ce sujet ici .

Insertion automatique de polices

Plus de mises à jour d'optimisation, maintenant la toute première peinture enrichissante de votre application est configurée avec une insertion automatique. Cela signifie que lorsque vous exécutez ng serve, Angular va maintenant télécharger et les polices en ligne qui sont utilisées ou liées dans votre projet afin que tout se charge encore plus rapidement. Cette mise à jour est sortie de la boîte avec Angular 11, alors mettez à jour votre version.

Faisceaux de test de composants

Avec Angular 9, il y avait ce harnais de test de composants qui fournissait une base API lisible et robuste pour tester les composants de matériaux angulaires avec le API prise en charge lors du test. Avec cette nouvelle version 11, nous avons maintenant des harnais pour tous les composants, donc encore plus de suites de tests peuvent maintenant être construites par les développeurs.

Cela s'accompagne de nombreuses mises à jour, améliorations de performances et même de nouvelles API. Désormais, la fonction parallèle facilite la gestion des actions asynchrones dans les tests, car vous pouvez exécuter plusieurs interactions asynchrones avec vos composants en parallèle. Une fonction telle que la détection manuelle des changements vous donnera désormais accès à un contrôle encore meilleur de la détection en désactivant simplement les détections de changement automatique dans vos tests unitaires. Vous pouvez consulter la documentation ici pour en savoir plus sur les faisceaux de test de matériaux angulaires.

Mise à jour vers la version 11

Dans votre CLI, vous pouvez mettre à jour un projet avec la commande ci-dessous:

 ng mise à jour @ angular / cli @ angular / core

Pour plus de scénarios de mise à jour, visitez update.angular.io pour trouver des informations détaillées et des conseils sur la mise à jour. Il est plus sûr de mettre à jour la version 11 à partir de la version 10.

Conclusion

Ceci a été un bref aperçu de tous les nouveaux et brillants changements fournis avec la version 11 tant attendue d'Angular. L'intégration automatique des polices était ma nouvelle fonctionnalité préférée. Quelle est la vôtre?