Nouveautés Angular 20 : ce qui change vraiment pour les développeurs

Chez AXOPEN, chaque montée de version d’un framework front-end JS comme AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. est un moment clé : entre excitation de découvrir ce qui change, et petite appréhension quant aux adaptations à prévoir dans le code. Angular 20 ne bouleverse pas tout, mais poursuit sa trajectoire avec des améliorations continues, parfois discrètes mais structurantes.

Alors, que propose concrètement cette nouvelle version ? Y a-t-il des impacts pour ceux qui utilisent encore Angular 18 ? Et surtout, faut-il envisager une migration dès maintenant ? On vous explique tout dans cet article.

Angular 20 : enfin la fin du Zone.js au profit du Zoneless ?

Les principaux travaux de cette nouvelle version Angular 20 tournent autour de la fin de Zone.js. Mais qu'est ce que c'est que zone.js et pourquoi l'équipe Angular travaille depuis tout ce temps pour ne plus en dépendre ? 

Quels sont les défauts de Zone.js ?

Prenons un exemple concret : lorsqu'une application est lancée comme une messagerie, elle a besoin de communiquer avec différents éléments. C'est dans ce cadre que Zone.js entre en scène ! Cette librairie agit comme un surveillant toujours aux aguets. Elle surveille toutes les actions asynchrones - requêtes HTTP, timers, clics, etc. - et dès que quelque chose se termine, elle déclenche une vérification complète de l'interface.

Vous me direz mais, si ça fonctionne, pourquoi changer ? 

Tout simplement parce que ce mécanisme est lourd dans le sens littéral du terme. Pas moins de 30/40kb pour le bundle en plus. Des performances détériorées à cause de centaines de cycles inutiles. Un Debugging compliqué, avec les tonnes de couches ajoutées par Zone.js qui altère la lisibilité des stacks traces.

Quand même pas mal de défauts pour une librairie nécessaire au bon fonctionnement du framework. 

Par quoi sera remplacé Zone.js ? 

Pour faire simple : par les signaux, et par vous ! L'équipe Angular a mis en place des fonctions utilisant les signaux (on en reparle après promis). Depuis Angular 20, le mode Zoneless est disponible en version Preview. Vous pouvez l'ajouter à votre projet en ajoutant le provide suivant : 

Cela veut dire que vous pouvez désormais tester une application Zoneless, en utilisant uniquement les outils natifs d'Angular tels que : signaux, ChangeDetectorRef, markForCheck(), et l'AsyncPipe.

Le mode Zoneless, c'est un peu comme passer de la conduite automatique à la boîte manuelle. Oui, c'est un peu plus contraignant, mais on a une meilleure maîtrise de ses performances et plus de contrôle de son application. 

Pour désinstaller Zone.js et tester Zoneless, vous pouvez suivre ce tuto : https://angular.fr/technical/zoneless

Les "signaux" angular : encore des "signaux" et toujours plus de "signaux" !

Difficile de parler d'Angular sans évoquer les signaux ! Pour ceux qui ne sont pas familiers avec les dernières versions du framework front-end JavaScriptLangage de scripting orienté objet, un signal est une sorte de wrapper autour d'une valeur : il permet de notifier automatiquement les éléments qui l'observent dès qu'un changement intervient. En résumé, c'est une approche réactive, qui s'oppose à celle de Zone.js, historiquement utilisée par Angular pour détecter les changements.

Depuis plusieurs versions, une grande partie de la roadmap Angular est dédiée à la stabilisation et à la généralisation de cette nouvelle mécanique. Avec Angular 20, une nouvelle étape est franchie : l'équipe continue d'intégrer les signaux au cœur des packages fondamentaux du framework. On les retrouve désormais dans les formulaires (actuellement en test, comme annoncé lors du Google I/O), mais aussi du côté de HTTP et du routeur, avec une volonté claire de réarchitecturer progressivement les briques critiques autour de ce paradigme réactif.

Après l'introduction de l'APIUne API est un programme permettant à deux applications distinctes de communiquer entre elles et d’échanger des données. Resource dans Angular 19 — qui permet de lancer des actions asynchrones en réponse à un changement de signal — Angular 20 introduit une nouvelle API orientée réseau : Http. Ces deux APIs sont encore en preview développeur, mais elles montrent la direction prise par le framework : plus de réactivité, plus de lisibilité, et une meilleure maîtrise des flux de données.

La collaboration entre Angular et Chrome DevTools

Parmi les nouveautés notables d'Angular 20, on trouve une amélioration significative de l'expérience de débogage, grâce à une collaboration renforcée entre les équipes d'Angular et de Chrome DevTools. Ce partenariat a permis la création d'une fonctionnalité dédiée à l'analyse fine des performances applicatives directement depuis l'outil de développement intégré à Chrome.

Concrètement, de nouveaux panneaux de profilage Angular sont désormais intégrés dans Chrome DevTools, offrant une meilleure visibilité sur le comportement de vos composants, la fréquence des changements d'état et les phases de rendu. Pour bénéficier de ces outils, Angular introduit la fonction enableProfiling() dans le package @angular/core. En l'appelant dans votre application, vous activez des mécanismes de profilage avancés, conçus pour vous aider à identifier les goulots d'étranglement et optimiser les performances de votre application Angular. 

Les nouveautés de styles qui font plus ou moins débat 

C'est officiel : les emblématiques *ngIf et *ngFor sont dépréciés à partir d'Angular 20. Ils continueront à fonctionner pour l'instant, mais leur suppression risque d'arriver avec la version 22, prévue dans environ un an. Leur remplacement est déjà en place via le nouveau système de contrôle de flux basé sur les annotations, avec @if, @for, etc. 

A venir également, des changements dans le nommage des fichiers. L'objectif de ces modifications est de retirer les complexités inutiles et ainsi, moderniser la syntaxe d'Angular. A partir d'Angular 20, par défaut, Angular CLI ne générera pas de suffixes pour les composants, directives, services et pipes. Au revoir, component.service.ts 

Si vous préférez garder les suffixes, pour une raison de clarté, vous pourrez ajouter la configuration suivante : \n\n{

"projects": {

"app": {

...

"schematics": {

"@schematics/angular:component": { "type": "component" },

"@schematics/angular:directive": { "type": "directive" },

"@schematics/angular:service": { "type": "service" },

"@schematics/angular:guard": { "typeSeparator": "." },

"@schematics/angular:interceptor": { "typeSeparator": "." },

"@schematics/angular:module": { "typeSeparator": "." },

"@schematics/angular:pipe": { "typeSeparator": "." },

"@schematics/angular:resolver": { "typeSeparator": "." }

},

...

}

\n

Est-ce que la montée de version Angular 18 à 20 est compliquée ? 

La montée de version d'Angular 18 à 20 n'est pas particulièrement compliquée. Angular 20 reste une version de transition, axée sur la stabilisation des fonctionnalités introduites précédemment, comme les "signaux" ou le mode Zoneless. Il n'y a pas de rupture majeure ni de refonte structurelle imposée, ce qui limite les risques de régression. Pour les montées de version, je recommande de s'accompagner du guide du site officiel: https://angular.dev/update-guide. Elle fournit toutes les informations nécessaires et la commande ng update fait le nécessaire. En résumé, la mise à jour est relativement fluide, surtout si votre projet est déjà à jour sur Angular 18 ou 19 !

Que retenir des nouveautés d'Angular 20 ? 

Avec cette version 20, l'équipe Angular a clairement mis l'accent sur la consolidation du framework plutôt que sur une avalanche de nouveautés. L'objectif principal est d'améliorer et de stabiliser des fonctionnalités déjà introduites ou encore en phase expérimentale, comme le mode zoneless, les signaux ou encore les nouvelles API structurantes.

Cette release marque également le début de travaux plus profonds, notamment autour de l'intégration des formulaires pilotés par signaux, une évolution majeure encore en gestation mais très attendue par la communauté.

De mon côté, je dois avouer que j'espérais une avancée plus ambitieuse sur les signaux. C'est une fonctionnalité puissante, qui redéfinit peu à peu la manière d'aborder la réactivité dans les applications Angular. Les évolutions apportées restent mesurées, mais elles témoignent d'une stratégie claire : poser des fondations solides avant d'accélérer.

Pour la suite, j'espère voir émerger des APIs encore plus orientées signal-first, et j'ai particulièrement hâte de tester la refonte des formulaires ainsi que les impacts du zoneless sur les performances d'applications complexes. En attendant la prochaine version, il ne reste plus qu'à remettre les mains dans le code… Rendez-vous dans quelques mois pour le débrief d'Angular 21 !