Angular 11 - Tout ce que vous devez savoir

La version 11 d'Angular est arrivée et elle a apporté d'excellentes mises à jour aux développeurs. Du cadre aux composants et CLI - tout est mis à jour. L'équipe Angular essaie d'apporter des changements majeurs à chaque mise à jour. Par exemple, iVY a été publié dans Angular 9, la prise en charge de Typescript 3.8 a été fournie dans Angular 9.1 et des modifications dans la bibliothèque de composants Angular Material UI ont été proposées dans Angular 10. Aujourd'hui, nous allons explorer les fonctionnalités d'Angular 11. alors.

Angular 11 - Fonctionnalités et mises à jour

Le point fort de cette version est des types plus stricts, l'inlining automatique des polices et l'amélioration des performances du routeur. L'inlining automatique des polices par défaut sera activé pour les applications mises à jour. Les performances améliorées du routeur garantissent que les applications sont réalisées plus rapidement. En dehors de ceux-ci, il y a plus à Angular 11 que nous énumérerons ci-dessous.

# Harnais de test de composants

Dans la version 9 d'Angular, la communauté a introduit les harnais de test de composants. Ceux-ci ont fourni une surface API robuste pour aider à tester les composants Angular Material. Il permet au développeur d'interagir avec les composants à l'aide de l'API prise en charge.

En version 11, un faisceau de composants est disponible pour chaque composant. Il est livré avec de nombreuses améliorations de performances, des mises à jour et même de nouvelles API. Désormais, la fonction parallèle facilite la gestion des actions asynchrones dans les tests, car les développeurs peuvent exécuter plusieurs interactions asynchrones avec les composants en parallèle. Par exemple, une fonction de détection manuelle des changements donnera accès à un meilleur contrôle de la détection simplement en désactivant les détections automatiques des changements à l'intérieur des tests unitaires.

# Support de remplacement de module à chaud mis à jour

Le remplacement de modules à chaud ou HMR est un mécanisme qui permet de remplacer les modules sans rafraîchir un navigateur complet. C'est un vieux concept mais Angular 11 en ajoute plus.

Angular 11 offre une prise en charge de HMR avec les modifications de code et les configurations requises. Il permet à la CLI d'activer HMR lors du lancement d'une application avec ng serve. La commande suivante est requise pour commencer :

ng servir –hmr

Ainsi, la commande CLI réduit considérablement la quantité d'efforts requis pour configurer le HMR. Une fois que les développeurs insèrent cette commande, la console affichera un message dès que le serveur local confirmera que HMR est actif.

Pendant le développement, les dernières modifications apportées aux modèles, styles et composants seront automatiquement mises à jour dans l'application en cours d'exécution. Il ne nécessite pas d'actualisation complète de la page, ce qui, à son tour, augmente la productivité des développeurs.

#Mise à jour de l'aperçu du service linguistique

Le service de langage angulaire propose divers outils utiles qui, selon les professionnels de toute société de développement de sites Web, garantissent un développement Web sans tracas. Le service linguistique mis à jour offrira une expérience plus précise aux développeurs. Ils peuvent vérifier un aperçu de la façon dont les choses fonctionneront avec un meilleur moteur de rendu et de visualisation. Le service de langage pourra déduire correctement les types génériques dans les modèles, tout comme le fait le compilateur TypeScript.

#Inlining automatique des polices

Angular 11 propose une mise en ligne automatique des polices qui aide à convertir les icônes et les polices Google en ligne dans l'index HTML. Lors de la compilation, la CLI Angular téléchargera et par conséquent intégrera les polices en ligne qui sont liées et utilisées dans l'application. Ceux-ci sont activés par défaut pour la configuration.

Ceci est fait par défaut dans les applications construites avec la version 11. Par conséquent, afin de tirer parti de cette optimisation, les développeurs doivent d'abord mettre à jour l'application.

Assistance #Webpack 5

Webpack est utilisé pour compiler de nombreux fichiers en un seul petit fichier ou bundle. Sa dernière version - Webpack 5 est sortie il y a quelques mois.

Angular 11 offre un support expérimental pour le webpack 5 et les développeurs peuvent l'utiliser pour essayer de nouvelles choses. L'équipe Angular peut étendre le support expérimental pour obtenir des bundles plus petits et des versions plus rapides une fois que le webpack devient plus stable.

Voici la commande pour utiliser webpack 5. Ajoutez les lignes suivantes au fichier package.json :

"résolutions": {
"webpack": "5.4.0"
}

#Passer à ESLint

TSLint a été l'un des outils de référencement les plus populaires utilisés et recommandés par les fournisseurs de services de développement angulaire. Récemment, la tâche a été confiée à ESLint.

Avec Angular 11, Codelyzer et TSLint sont officiellement obsolètes et seront supprimés dans les futures versions. La dernière version a introduit une méthode en 3 étapes pour migrer de TSLint vers ESLint :

Étape 1 - Exécuter ng add @angular-eslint/schematics
Étape 2 - Maintenant, exécutez la commande ng g @angular/schematics:convert-tslint-to-eslint {{VOTRE NOM DE PROJET}}
Étape 3 - Supprimez le tslint.json au niveau racine.

#Constructions plus rapides

Angular 11 apporte des améliorations radicales de la vitesse. Le processus de mise à jour NGCC est désormais 2 à 4 fois plus rapide qu'auparavant. Par conséquent, les développeurs n'ont pas besoin de passer beaucoup de temps à attendre la fin des versions et des reconstructions.

Prise en charge de #TypeScript 4.0

Angular 11 prend en charge TypeScript 4.0. La prise en charge de TypeScript 3.9 a maintenant été abandonnée. L'une des principales raisons derrière cela est d'améliorer la vitesse des builds. La dernière version garantit des builds plus rapides et plus fluides que les versions précédentes.

#Meilleur journalisation et création de rapports

La dernière version d'Angular a apporté diverses modifications aux rapports de phase de construction qui les rendent plus utiles pendant le développement. La sortie CLI comprend des informations plus conviviales et lisibles.

#Autres changements

En dehors de ceux mentionnés ci-dessus, la dernière version d'Angular apporte plusieurs autres changements comme :

• Améliorations apportées aux techniciens de service
• Nouveaux schémas et migrations automatisés
• Prise en charge du chargement paresseux pour divers points de vente nommés
• La prise en charge d'Internet Explorer 9,10 et de la prise en charge mobile d'IE est entièrement supprimée
• preserveQueryParams est supprimé du routeur. Au lieu de cela, les développeurs peuvent utiliser queryParamsHandling="preserve"
• Des types plus stricts sont maintenant construits dans des tuyaux
• Angular CLI peut générer des gardes de résolution
• La fonction formatDate prend en charge le format d'année de numérotation des semaines ISO 8601
• Les expressions dans les ICU sont à nouveau vérifiées par type
• Le tube asynchrone ne renvoie plus undefined pour toute entrée qui a été typée comme undefined.

Comment mettre à jour vers Angular 11

Vous pouvez engager des développeurs Angular pour mettre à jour votre application vers Angular 11. Les développeurs doivent exécuter la commande suivante :

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

Vous avez trouvé l'article utile ? Partagez avec vos connaissances et faites-leur savoir tout sur Angular 11.