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 --strictL’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.
Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.
On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise
Demande ta version numérique gratuite de mon livre Javascript Array Methods
