Angular 10 - Ce que vous devez savoir à ce sujet

Angular a récemment publié une nouvelle version le 24 juin 2020. Elle n'a été déployée qu'après 4 mois de publication de la version 9.0 d'Angular. Le dernier Angular 10 est une version bêta - ce qui signifie que l'équipe Angular approche de la version finale de la dernière version de ce framework orienté tapuscrit développé par Google.

Si vous êtes un développeur Web ou quelqu'un qui cherche à développer une application Web pour votre entreprise, vous devez savoir ce que cette nouvelle version a à offrir. Étant donné que la version bêta est déployée dans les 4 mois suivant la sortie de la dernière version, vous pouvez vous demander si c'est un succès ou un échec ! Nous sommes là pour vous aider à trouver la réponse. Examinons de plus près les principales fonctionnalités d'Angular 10.

Caractéristiques d'Angular 10

Bien que l'équipe Angular ait soutenu que la dernière version se concentrera principalement sur les outils et l'écosystème de qualité au lieu d'introduire une pléthore de nouvelles fonctionnalités, nous avons mené une étude approfondie et vous avons apporté une liste complète des offres de valeur que vous pouvez attendre de la version . Vérifions-le alors.

• Nouveau sélecteur de plage de dates

La bibliothèque de composants de l'interface utilisateur des matériaux angulaires est désormais équipée d'un nouveau sélecteur de plage de dates. Vous ne savez pas ce que c'est ? Un sélecteur de plage de dates peut être attaché aux pages Web. Il affiche des calendriers pour sélectionner des heures, des dates ou toute période prédéfinie comme "les 20 derniers jours".

Si vous souhaitez que vos utilisateurs sélectionnent une plage de dates au lieu d'une seule date, vous pouvez utiliser les composants mat-date-range-picker et mat-date-range-input.

• Paramètres plus stricts en option

Angular 10 a une configuration de projet plus stricte tout en créant un nouvel espace de travail avec ng new. Une fois que vous activez cet indicateur, il introduira quelques nouveaux paramètres dans votre projet, comme l'amélioration de la maintenabilité, permettant à la CLI d'effectuer une optimisation avancée dans votre application, aidant à détecter les bogues à l'avance, etc.

Voici une portée de travail de base de l'indicateur strict :

-Passer la vérification du type de modèle à Strict
-Activation strict plus dans TypeScript
-Configuration des règles de lint pour empêcher l'utilisation de "any" comme déclaration de type
-Réduction des budgets groupés par défaut

• Avertissements concernant les importations CommonJS

L'utilisation d'une dépendance emballée avec CommonJS rend les bundles volumineux et ralentit ainsi l'application. Angular 10 avertit les développeurs une fois qu'une version tire l'un de ces bundles. De cette façon, ils peuvent faire savoir à leurs dépendances qu'ils préféreraient un ensemble de modules ECMAScript (ESM).

• Mises à jour

Quelques mises à jour majeures ont été apportées aux dépendances d'Angular afin de se synchroniser avec l'écosystème JavaScript. Ceux-ci sont comme suit :

-TypeScript est mis à jour vers TypeScript 3.9. Cela aide l'équipe à travailler sur l'amélioration des performances et de la stabilité.
-TSLint est mis à jour vers la v6
-TSLib est mis à jour vers la v2.0

La mise en page du projet a également été mise à jour. Par conséquent, vous pouvez voir un nouveau fichier tsconfig.base.json dans Angular 10. Ce fichier prend mieux en charge les IDE, le type de résolution de l'outil de construction et les configurations de package.

En dehors de cela, la dernière version d'Angular permet des choses comme l'accélération du compilateur, l'édition d'expériences, les correctifs rapides et les achèvements.

• Amélioration des performances du ngcc

Cette fonctionnalité Angular 10 favorise la mise en œuvre d'un outil de recherche de points d'entrée basé sur un programme. Cela peut traiter les points d'entrée où seuls les programmes définis par un fichier tsconfig.json peuvent atteindre. De plus, les dépendances sont cachées à l'intérieur de l'exposition du point d'entrée et peuvent être lues sans être calculées à chaque fois.

Le chemin de base de chaque package ainsi que les points d'entrée n'ont pas besoin d'être stockés dans le fichier. Par conséquent, les applications n'ont pas besoin de stocker des tableaux vides inutiles. Cette fonctionnalité permet de manifester et de réduire la taille du fichier au point d'entrée, même pour les modules de nœuds volumineux. Cela améliore considérablement les performances.

• Fusionner plusieurs fichiers

La dernière version d'Angular prend en charge la fusion de plusieurs documents de traduction sans aucun problème. Dans les versions précédentes, ceux-ci ne pouvaient charger qu'un seul fichier. Désormais, les utilisateurs peuvent spécifier plusieurs documents par paramètre régional et les transactions de tous les fichiers peuvent être fusionnées par un ID de messagerie. Le document le plus essentiel sera mis en premier avec des traductions de secours plus tard.

• Délai de verrouillage asynchrone

Une autre chose intéressante à propos d'Angular 10 est que le délai de verrouillage asynchrone est configuré dans cette version. Cela prend en charge le fichier ngcc.config.js afin d'ajuster les délais de nouvelle tentative et les tentatives de nouvelle tentative dans AsyncLocker. Un test d'intégration permet aux développeurs de surveiller le délai d'expiration, d'utiliser le fichier ngcc.config.js pour réduire le délai d'expiration et d'éviter que le test ne prenne trop de temps. Pas étonnant que les professionnels des sociétés de développement d'applications Web accueillent la dernière version d'Angular avec un immense soulagement !

• Routeur

Le garde CanLoad peut revenir à UrlTree dans la dernière version d'Angular. Le garde CanLoad renvoyant UrlTree annule toute navigation de pointe et, à son tour, aide à rediriger. Cela correspond au comportement actuel avec les gardes CanActivate disponibles - ceux-ci sont également ajoutés ici. Cependant, cela n'a aucun impact sur le préchargement.

• Compiler

Ahead-of-Time (AOT) compile une application et ses bibliothèques au moment de la génération. C'est une pratique courante depuis Angular 9. Il peut convertir les codes pendant le temps de construction avant même que le navigateur ne télécharge et exécute ensuite ce code. Naturellement, cela garantit un rendu plus rapide dans le navigateur. Le compilateur élimine les requêtes AJAX séparées pour les fichiers source en incorporant des modèles HTML externes et des feuilles de style CSS dans le JavaScript de l'application.

Il y a quelques changements évidents apportés à l'AOT dans Angular 10 :

1. Sa compilation incrémentale aide à atteindre de meilleurs temps de construction
2. Avec un code généré hautement compatible avec le tree shaking, il peut atteindre de meilleures tailles de construction
3. La version vous permet d'explorer plusieurs nouvelles fonctionnalités telles que le chargement paresseux du composant au lieu des modules, la métaprogrammation ou les composants d'ordre supérieur, le dernier système de détection des modifications qui n'est pas basé sur Zone.js, etc.

• Bug réparé

Dans cette version, un certain nombre de corrections de bogues ont été effectuées. Celles-ci incluent la suppression de toute instance non adressée de la plage dans le compilateur, la résolution des erreurs liées à la migration lors de l'importation d'un symbole inexistant, l'identification des modules affectés par les remplacements dans TestBed, etc. De plus, il existe également une solution de contournement dans le noyau pour corriger le bogue Terser Inlining.

• Meilleur engagement communautaire

Angular a déjà une grande communauté de développeurs mondiale qui fournit constamment des offres de valeur pour les projets Angular à travers tout le spectre. Récemment, l'organisation elle-même prévoit d'adopter des stratégies et de faire un investissement pour dynamiser la communauté et rendre la plate-forme encore meilleure.

• Dépréciations et suppressions

Le format de package angulaire n'inclut plus les bundles FESM5 ou ESM5. Cela vous permet d'économiser 119 Mo de temps de téléchargement et d'installation lors de l'exécution de yarn ou npm install dans des bibliothèques et des packages Angular. Ces formats peuvent être ignorés car toute mise à niveau vers le bas pour aider ES5 est effectuée à la fin du processus de développement.

De plus, l'organisation Angular a déconseillé toute prise en charge des anciens navigateurs comme IE9, 10 et Internet Explorer Mobile.

• Autres changements

Angular 10 apporte des changements révolutionnaires. Par exemple, Logic est mis à jour en correspondance avec le formatage des périodes de jour qui s'étendent au-delà de minuit. Si votre application utilise formatDate ou DatePipe ou même les codes de format b et B, elle sera affectée par ce changement.

Un autre changement est que tout résolveur qui renvoie EMPTY annulera la navigation. Les développeurs doivent mettre à jour les résolveurs avec une valeur spécifique comme default!Empty.

Angular NPM ne contient pas quelques commentaires jsdoc pour prendre en charge les optimisations avancées de Closure Compiler. Ceux qui utilisent Closure Compiler devraient mieux consommer les packages Angular construits directement à partir des sources plutôt que de consommer les versions publiées sur NPM. Pendant une période temporaire, les utilisateurs peuvent utiliser leur pipeline de build actuel.

Dans cette version, les en-têtes Vary sont ignorés lors de la récupération des sources à partir des caches ServiceWorker. Cela a pour effet de récupérer les sources même si leurs en-têtes ne sont pas similaires. Si une application doit différencier ses réponses en fonction des en-têtes de requête, assurez-vous que Angular ServiceWorker est configuré pour éviter la mise en cache de toute ressource affectée.

Les avertissements concernant tout élément inconnu sont désormais notés comme des erreurs. Cela ne cassera pas votre application, mais cela peut activer des outils qui s'attendent à être connectés via console.error.

Comment mettre à jour vers Angular 10

Pour passer à la dernière version d'Angular, vous pouvez utiliser la commande suivante :

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

Voici une directive définitive sur la mise à jour vers la version angulaire 10. Cependant, sans expertise technique, la commande peut ne pas être utile. Faites appel à des services de développement professionnels d'Angular pour réussir la mise à jour vers Angular 10.

Conclusion
Toute la commodité offerte par Angular 10 vous a peut-être convaincu de mettre à jour la version de votre framework d'application. Faites-nous confiance, cela en vaut la peine.