Angular 10: Les principales nouveautés

La nouvelle version d’Angular, Angular v10 est officiellement disponible depuis le 25 juin 2020. Avec cette nouvelle mise à jour du framework, l’équipe Angular continue à améliorer le framework et propose une mises à jour de l’écosystème, mais aussi une revue de divers points que je vous présente dans cet article.

Depuis la sortie d’Angular 2, les mises à jour du framework sont devenues beaucoup plus fréquentes. En effet, l’équipe Angular propose régulièrement une mises à jour du framework, ceci presque tous les 6 mois.

Cela permet de maintenir « up to date » le framework sans causer de problème tel que le passage de la v1 à la v2 de Angular qui sont deux framework complètement différent (Angular JS à Angular 2).

Le manque de mises à jour régulière à causer beaucoup de tors au framework qui a perdu de nombreux développeurs qui sont passé sur React à ce moment, jugeant ce dernier plus « stable » et mieux « maintenu ».

L’équipe d’Angular a très vite compris son erreur et propose depuis, une mise à jour régulière qui implémente petite à petit les corrections et améliorations due aux évolutions du language et des possibilités.

Ainsi, le passage d’une version à une autre d’Angular est beaucoup plus facile pour le développeur et demande moins de temps pour être effectué.

Maintenant, regardons ensemble quelles sont les principales modifications apportées à la version 10 d’Angular.

Mise à jours de l’écosystem

Comme d’habitude, la team Angular a fait quelques mises à jour des dépendances du framework pour rester synchronisé avec l’écosystème JavaScript actuel.

  • TypeScript mis à jour vers TypeScript 3.9
  • TSLib a été mis à jour vers la version 2.0
  • TSLint a été mis à jour en v6

Tu verras aussi un nouveau fichier tsconfig.base.json. Ce fichier tsconfig.json supplémentaire prend mieux en charge la façon dont les IDE et les outils de génération résolvent les configurations de type et de package.

CommonJS imports Warnings

Lorsque tu utilisez une dépendance fournie avec CommonJS, cela peut entraîner des applications plus lentes.

Avec cette mises à jour, Angular CLI affiche un avertissement lorsque le build intègre l’un de ces bundles.

Si tu commences à voir des avertissements pour tes dépendances, indique à tes dépendances que tu préférais utiliser un ensemble de modules ECMAScript (ESM).

Optional Stricter Settings

Avec la version 10 de Angular, tu peux configurer ton projet en mode Strict lorsque tu crées un nouvel espace de travail avec ng new.

ng new MyApp --strict

L’activation de cet indicateur initialise ton projet avec quelques nouveaux paramètres qui améliorent la maintenabilité, aident à détecter les bugs à l’avance et permettent à Angular CLI d’effectuer des optimisations avancées sur l’application.

Plus précisément, l’indicateur strict effectue les opérations suivantes:

  • Active le mode strict dans TypeScript
  • Transforme la vérification du type de modèle en Strict
  • Les budgets groupés par défaut ont été réduits d’environ 75%
  • Configure les règles de linting pour empêcher les déclarations de type any
  • Configure votre application comme sans effet secondaire pour permettre un tree-shaking plus avancé

Nouvelle configuration par défaut pour les Browsers

Angular a mis à jour la configuration du navigateur pour les nouveaux projets afin d’exclure les navigateurs plus anciens et moins utilisés.

Angular 9:

Angular 10

Cela a pour effets secondaire de désactiver les versions ES5 par défaut pour les nouveaux projets.

Pour activer les versions ES5 et le chargement différentiel pour les navigateurs qui en ont besoin (comme IE ou UC Browser), ajouter simplement les navigateurs dont tu as besoin dans le fichier .browserslistrc à la racine du projet.

Deprecations and Removals

Le format de package Angular n’inclut plus les bundles ESM5 ou FESM5, cela permet d’économiser 119 Mo de temps de téléchargement et d’installation lors de l’exécution de l’installation de Yarn ou NPM pour les packages et les bibliothèques Angular.

Ces formats ne sont plus nécessaires, car toute mise à niveau inférieure pour prendre en charge ES5 est effectuée à la fin du processus de génération.

Sur la base de consultations approfondies avec la communauté, la team Angular déconseille la prise en charge des anciens navigateurs, notamment IE 9, 10 et Internet Explorer Mobile.

Tu peux en savoir plus sur les dépréciations et suppressions sur ce lien:
https://next.angular.io/guide/deprecations

Nouveau Date Range Picker Angular Material

Aussi une belle mise à jour du package Material de Angular avec la modification du Date Picker.

Demo online:
https://stackblitz.com/angular/nknyovevygv?file=src%2Fapp%2Fdate-range-picker-overview-example.html

Comment faire la mise à jour Angular 10

Visite update.angular.io pour des informations détaillées et des conseils.

Pour avoir la meilleure expérience de mise à jour, je te conseil de toujours mettre à niveau une version majeure à la fois.

Conclusion

La nouvelle version d’Angular ne change pas grand-chose pour les développeurs. Le changement est plus au niveau du framework lui-même que la manière de l’utiliser. Ce qui facilite énormément la mises à jour vers la version 10 du framework.

J’espère que tu arriveras à faire la mise à jour de ton projet Angular vers la version 10. Si tu rencontre des problèmes, tu peux m’écrire un message par email je te répondrai le plus rapidement possible.

En attendant, je te laisse consulter les autres articles traitant du même sujet dans la section Angular.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.

Ne rate plus jamais un article!

Inscrit toi pour recevoir une notification par email lors de la publication d'un nouvel article.

Non, je ne veux pas m'inscrire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *