Angular 11 est disponible avec le support expérimental de Webpack 5

Angular 11 est disponible avec le support expérimental de Webpack 5
et supprime la prise en charge d'Internet Explorer 9, 10, ainsi que la version mobile

L'équipe de développement d'Angular a publié Angular 11 ce mercredi 11 novembre. Cette nouvelle version du framework open source de Google est axée sur l'amélioration de la sécurité des types d'API et la résolution des problèmes. Toutefois, elle ajoute de nouvelles fonctionnalités à Angular, comme le support de Webpack 5 (expérimental), la prise en charge du chargement paresseux avec les sorties nommées, etc.

Développé par Google, Angular est un framework de conception d'applications et une plateforme de développement pour la création d'applications monopages (Single Page Applications) efficaces et sophistiquées. Selon l'équipe de développement, la version 11 apporte quelques mises à jour intéressantes pour les développeurs Angular partout dans le monde. Cette version comporte des mises à jour sur l'ensemble de la plateforme, y compris le framework, le CLI et les composants. Voici ci-dessous un aperçu des nouveautés dans Angular 11.

Pièce jointe 583836

Ajout automatique de polices

Pour rendre vos applications encore plus rapides en accélérant leur FCP (First Contentful Paint), l'équipe a introduit la fonctionnalité "Automatic Inlining of Fonts". Pendant la compilation, la CLI téléchargera et alignera les polices qui sont utilisées et liées dans l'application. Selon l'équipe du framework, la fonctionnalité est activée par défaut dans les applications construites avec la version 11. Pour profiter de cette optimisation, il vous suffit de mettre à jour votre application.

Harnais de test des composants

Dans Angular v9, l'équipe a introduit les "harnais" de test des composants. Ils fournissent une surface API robuste et lisible pour aider à tester les composants Angular Material. Il permet aux développeurs d'interagir avec les composants Angular Material en utilisant l'API prise en charge pendant les tests. Avec la version 11, il existe désormais des harnais pour tous les composants. Les développeurs peuvent maintenant créer des suites de tests plus robustes.L'équipe a également inclus des améliorations de performances et de nouvelles API.

La fonction "parallel" facilite le travail avec des actions asynchrones dans vos tests en permettant aux développeurs d'exécuter plusieurs interactions asynchrones avec des composants en parallèle. La fonction "ManualChangeDetection" permet aux développeurs d'accéder à un contrôle plus fin de la détection des changements en désactivant la détection automatique des changements dans les tests unitaires.

Amélioration des rapports et de la journalisation

Angular 11 apporte des modifications au rapport sur la phase de construction afin de le rendre encore plus utile pendant le développement. Autrement dit, cette version comporte de nouvelles mises à jour des sorties de l'ITC pour rendre les journaux et les rapports plus faciles à lire.

Mise à jour de l'aperçu d'Angular Language Service

Selon l'équipe, Angular Language Service fournit des outils utiles pour rendre le développement avec Angular productif et amusant. La version actuelle d'Angular Language Service est basée sur View Engine et avec la sortie d'Angular 11, l'équipe donne un aperçu d'Angular Language Service basé sur Ivy. En effet, Ivy est le nom de code du pipeline de compilation et de rendu de la prochaine génération d'Angular. Depuis la version 9 d'Angular, le nouveau compilateur et les instructions d'exécution sont utilisés par défaut à la place de l'ancien compilateur et de l'ancien temps d'exécution, connu sous le nom de View Engine.

Angular Language Service mis à jour offre une expérience plus puissante et plus précise aux développeurs. Désormais, Angular Language Service sera en mesure de déduire correctement les types génériques dans les modèles, de la même manière que le compilateur TypeScript le fait. Selon l'équipe, cette nouvelle fonctionnalité puissante est toujours en cours de développement, mais elle a voulu partager un aperçu alors qu'elle continue à la préparer pour une sortie complète dans une prochaine version.

Amélioration du support pour le remplacement des modules à chaud

Angular a introduit le remplacement des modules à chaud ((Hot Module Replacement -HMR), mais l'activation de ce dernier a nécessité des changements de configuration et de code, ce qui en fait un outil moins qu'idéal à inclure rapidement dans les projets Angular. Dans la version 11, l'équipe a mis à jour la CLI pour permettre l'activation du HMR lors du démarrage d'une application avec "ng serve". Après le démarrage du serveur local, la console affiche un message confirmant que le HMR est actif.

Notons que le remplacement de module à chaud est activé pour le serveur de développement. Désormais, pendant le développement, les dernières modifications apportées aux composants, modèles et styles seront instantanément mises à jour dans l'application en cours d'exécution. Tout cela sans avoir besoin de rafraîchir une page entière. Les données saisies dans les formulaires sont préservées ainsi que la position de défilement, ce qui stimule la productivité des développeurs.

Des constructions plus rapides

L'équipe de développement du framework a annoncé qu'à partir d'Angular 11, elle accélère le cycle de développement et de construction en effectuant des mises à jour dans certains domaines clés. Lors de l'installation des dépendances, le processus de mise à jour de ngcc est désormais 2 à 4 fois plus rapide. Le support de TypeScript v3.9 a été supprimé et remplacé par TypScript v4.0, ce qui, selon l'équipe, rend la compilation plus rapide.

Support expérimental da Webpack 5

Les équipes peuvent maintenant utiliser Webpack v5. Actuellement, vous pouvez expérimenter la fédération de modules. Le support est encore expérimental et en cours de développement, et l'équipe ne recommande pas son utilisation en production. Pour l'instant, vous devrez utiliser yarn pour tester cela, car npm ne supporte pas encore la propriété des résolutions. À l'avenir, Webpack v5 ouvrira la voie à :

• des constructions plus rapides grâce à la mise en cache sur disque persistant ;
• des paquets plus petits grâce à cjs tree-shaking ;

Linting

Dans les versions précédentes d'Angular, l'équipe a fourni une implémentation par défaut pour le linting (TSLint). Aujourd'hui, TSLint est dépréciée par les créateurs du projet qui recommandent la migration vers ESLint. James Henry, avec d'autres membres de la communauté open source, a développé une solution tierce et un chemin de migration via typescript-eslint, angular-eslint et tslint-to-eslint-config. L'équipe d'Angular a collaboré étroitement pour assurer une transition en douceur des développeurs Angular vers la pile de linting supportée.

Ainsi, elle déprécie l'utilisation de TSLint et Codelyzer dans la version 11. Cela signifie que dans les versions futures, l'implémentation par défaut pour les projets Angular ne sera pas disponible. Rendez-vous sur la page officielle du projet pour obtenir un guide permettant d'incorporer angular-eslint dans un projet et migrer depuis TSLint.

Prise en charge du chargement paresseux avec les sorties nommées

Jusqu'à présent, les sorties nommées supportaient toujours le composant, mais il n'y avait aucun moyen de charger paresseusement le module en utilisant la sortie nommée. Vous pouvez l'utiliser maintenant. Pour rappel, le lazy loading ou le chargement paresseux est une technique qui permet de spécifier quels composants d’un programme doivent être chargés lors du démarrage de celui-ci. Si un composant logiciel non préalablement chargé se révèle nécessaire au cours de l’utilisation du programme, ce composant sera chargé à ce moment-là.

Routeur

Auparavant, lors de l'utilisation de la méthode RouteReuseStrategy#shouldReuseRoute, il y avait un problème de permutation des routes futures et suivantes pour les routes enfants. Ce problème est maintenant résolu, mais si vous l'utilisez déjà dans votre code, vous devez souvent ajuster votre code.

Suppression du support de IE9/IE10 et IE mobile

Dans cette nouvelle version d'Angular, l'équipe a supprimé le support de IE9/IE10 et IE mobile. IE11 est la seule version d'IE encore prise en charge par Angular. L'équipe a également supprimé les API obsolètes et en a ajouté quelques-unes à la liste des interfaces de programmations obsolètes. N'oubliez pas de vérifier que vous utilisez les dernières API et que vous suivez les meilleures pratiques recommandées.

Générer un test E2E avec async/await

Il est possible d'utiliser async/await pour la tâche d'async pendant l'écriture des cas de test E2E. SELENIUM_PROMISE_MANAGER était utilisé auparavant avec protractor pour gérer les scénarios d'async. CLI ne générera plus la configuration de protractor avec SELENIUM_PROMISE_MANAGER.

Sources : Angular 11.0, Page GitHub d'Angular

Et vous ?

:fleche: Que pensez-vous d'Angular 11 ?

Voir aussi

:fleche: Angular 10, la prochaine version majeure du framework TypeScript : correction de bogues, amélioration de performances et autres

:fleche: Angular 9.0 est disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy. L'équipe explique les avantages apportés par ce moteur de rendu

:fleche: État de JavaScript en 2019 : les développeurs aiment un peu plus React, Angular est en déclin, un groupe de développeurs pense que JS est « trop complexe »

:fleche: Le lazy loading d'images et iframes débarque dans Chrome Canary pour des vitesses de chargement de pages Web en hausse de 18 à 35 %