Annonce d’Angular v22

• Angular v22 étend les flux des agents IA aux outils de contrôle du serveur de développement d’Angular MCP, à Angular Agent Skills, à WebMCP expérimental, ainsi qu’aux workflows de génération Angular dans Google AI Studio et Gemini Canvas
• Avec pour objectif d’améliorer la stabilité et l’expérience développeur, il fait passer Signal Forms, Angular Aria, ainsi que resource et httpResource, du stade expérimental/preview à un état prêt pour la production
• Signal Forms est une API de formulaires déclarative qui combine les Reactive Forms, les formulaires fortement typés, les approches appréciées des formulaires basés sur des templates et la réactivité des signals ; la documentation a été enrichie, les retours de la communauté intégrés, et la prise en charge d’Angular Material et d’Angular Aria finalisée
• Les améliorations des API et des templates incluent l’intégration de la Navigation API dans le Router, le contrôle du nettoyage des ressources de routes, @Service et injectAsync, ainsi que la prise en charge des commentaires dans les éléments HTML, du spread/rest, des vérifications @switch et des fonctions fléchées dans les templates
• Angular v22 renforce ses fondations pour l’avenir avec OnPush par défaut pour les nouvelles applications, le renommage de ChangeDetectionStrategy.Eager, une developer preview de @boundary au troisième trimestre 2026, l’arrêt prévu du support de la famille Webpack et un focus sur TSGo

---

Fonctionnalités désormais prêtes pour la production

• Signal Forms est une API de formulaires réactive, composable et déclarative qui combine les avantages de Reactive Forms, les formulaires fortement typés, les éléments préférés des formulaires basés sur des templates et la réactivité des signals
• Depuis la sortie de la v21, le guide des formulaires sur angular.dev a été mis à jour, les retours et problèmes remontés par la communauté ont été pris en compte, et l’intégration avec Angular Material et Angular Aria est prise en charge
• Angular Aria est un ensemble de primitives d’accessibilité conçu pour laisser aux développeurs le style et la logique métier, tandis que les directives et patterns UI gèrent l’accessibilité ; avec la v22, il devient utilisable en production
• Les 12 patterns UI d’Angular Aria couvrent des modèles d’accessibilité courants, avec une API stabilisée, une prise en charge complète de Signal Forms et des test harnesses
• Les API réactives asynchrones permettent, avec resource, de gérer des ressources asynchrones avec une ergonomie de type signal, et avec httpResource, de traiter la récupération de données HTTP dans un modèle plus déclaratif
• resource et httpResource peuvent être utilisés dans des applications de production avec la v22, et leur utilisation est détaillée dans le guide officiel

Développement IA et workflows d’agents

• Angular v22 étend les flux pour les applications AI-native à trois domaines : les outils d’agents pour l’écriture de code, les outils d’agents dans le navigateur et les plateformes de développement IA
• Avec devserver.wait_for_build d’Angular MCP, un agent peut lancer le build d’une application, examiner le résultat produit et décider de l’étape suivante ; cela permet aussi de créer une boucle d’auto-correction à partir des erreurs de code présentes dans les logs de build
• devserver.start et devserver.stop servent à démarrer et arrêter le serveur de développement ; avec les outils de test et d’end-to-end, ils passent au statut stable dans la v22
• Angular MCP continue d’élargir sa liste d’outils pour le développement d’applications Angular modernes, avec notamment ai_tutor, modernize et onpush_zoneless_migration
• angular-developer d’Angular Agent Skills fournit au modèle des consignes de développement Angular moderne, incluant des fonctionnalités récentes comme Angular Aria et Signal Forms ; le fichier fait moins de 140 lignes et utilise une approche de divulgation progressive qui charge des exemples de code et des fichiers de référence au moment opportun
• angular-new-app guide les utilisateurs qui découvrent Angular dans un environnement d’agents afin de configurer un environnement local de développement Angular ; ces skills peuvent être utilisés dans des outils de développement IA comme Antigravity ou dans des environnements de workflows d’agents
• Les Contributor Skills aident à comprendre le modèle mental nécessaire pour développer des fonctionnalités dans la codebase Angular, et sont utiles aussi bien aux personnes préparant leur première pull request qu’aux membres d’équipe expérimentés
• WebMCP, encore expérimental, permet de créer et d’exposer dans le navigateur des outils structurés utilisables par des agents, réduisant le besoin d’interactions directes avec le DOM ; il prend en charge la définition d’outils pour l’application entière, les routes et les services, ainsi que la génération automatique d’outils dynamiques basée sur Signal Forms
• La documentation d’intégration de WebMCP est disponible sur angular.dev/ai/webmcp
• Google AI Studio et Gemini Canvas aident les builders sans parcours traditionnel en programmation à démarrer des projets basés sur Angular ; dans le sandbox de code intégré à l’application web Gemini, il est possible de créer une application complète directement dans le navigateur
• Dans le workflow Gemini, il suffit de préciser « Angular » dans le prompt pour générer une application Angular ; après génération, on peut la modifier manuellement dans le navigateur, continuer à dialoguer avec l’IA pour l’affiner ou demander une intégration Firebase
• Dans Google AI Studio, un workflow similaire est disponible en sélectionnant Angular dans le configuration panel puis en lançant le prompt ; après génération, on peut ajouter des fonctionnalités par chat et aller jusqu’au déploiement

Router et API d’injection de dépendances

• L’intégration de la Navigation API aligne le Router sur la Navigation API native du navigateur et permet de contrôler les déplacements dans l’application avec moins de boilerplate
• Le Router peut intercepter automatiquement toutes les requêtes de navigation, y compris RouterLink et les balises d’ancre standard
• En s’appuyant sur le comportement natif de scroll, il permet aux utilisateurs de revenir à l’endroit attendu lors des navigations back/forward, sans logique personnalisée de gestion du scroll et sans impact sur la taille du bundle
• Le raccord direct au cycle de vie natif de navigation du navigateur facilite aussi la gestion d’un indicateur global de chargement et d’annonces d’accessibilité précises pendant les transitions de page
• Le contrôle du nettoyage des routes rend la gestion mémoire plus explicite via deux fonctionnalités : withExperimentalAutoCleanupInjectors et destroyDetachedRouteHandle
• withExperimentalAutoCleanupInjectors détruit automatiquement les injecteurs de dépendances associés à des routes qui ne sont plus actives, afin de nettoyer les providers et ressources inactifs au niveau des routes
• destroyDetachedRouteHandle est une API publique officielle permettant de détruire proprement les composants contenus dans un detached route handle lorsqu’une RouteReuseStrategy personnalisée est utilisée
• Le décorateur @Service remplace dans la plupart des cas le pattern @Injectable({ providedIn: 'root' }) ; @Injectable reste utilisable lorsqu’une configuration plus poussée ou une injection via constructeur est nécessaire
• injectAsync prend en charge l’injection de dépendances asynchrones dans les services, ce qui permet le code splitting et le chargement à la demande ; le service doit être auto-provided, ce que @Service gère
• Dans l’exemple d’injectAsync, le service ReportExporter n’est chargé qu’au moment de sa première utilisation, avec la possibilité d’options de prefetch comme prefetch: onIdle
• Son utilisation est décrite dans la documentation officielle d’injectAsync
• Parmi les autres améliorations figurent la compatibilité complète avec TypeScript 6 et des gains de performance au niveau du pipeline de template et de l’efficacité à l’exécution

Expérience d’écriture des templates et détection des changements

• Il est désormais possible d’utiliser des commentaires au niveau des propriétés et bindings à l’intérieur des éléments HTML, ce qui améliore la lisibilité et la clarté des templates ; le basculement de commentaires dans VS Code est également pris en charge
• Angular déduplique automatiquement les host directives correspondant plusieurs fois sur un même élément
• Si une directive correspond à la fois dans le template et comme host directive, la correspondance du template est prioritaire, et les mappages input/output de la host directive sont fusionnés
• Si un input ou un output est exposé sous plusieurs noms, Angular déclenche une erreur afin d’éviter les conflits de nommage
• La syntaxe spread/rest peut être utilisée dans les templates, sur les object literals, array literals et appels de fonction
• @switch permet à plusieurs @case de partager le même output, ce qui réduit la duplication de code
• Dans un bloc @switch utilisant un union type, l’utilisation de @default never; permet d’obtenir une erreur à la compilation lorsqu’une valeur n’est pas prise en charge
• Les fonctions inline dans les templates peuvent être écrites sous forme de fonctions fléchées ; elles conviennent aux fonctions courtes et simples, à condition de ne pas placer dans les templates des fonctions complexes ou longues à exécuter
• Dans les nouvelles applications, OnPush devient la stratégie de détection des changements par défaut, en cohérence avec l’objectif de zoneless par défaut et de performance by default
• L’ancienne valeur par défaut ChangeDetectionStrategy.Default est renommée ChangeDetectionStrategy.Eager, afin de rendre plus explicite son comportement dans le cycle de détection des changements

Error boundaries, dépréciations et orientations futures

• @boundary est une nouvelle API permettant d’implémenter des error boundaries dans les templates Angular ; elle peut intercepter les erreurs remontant depuis le bloc de code qu’elle entoure et définir un contenu de repli
• L’objectif est de réduire les cas où l’échec d’un composant unique fait tomber toute la page, notamment dans des flux critiques comme le checkout e-commerce
• @boundary sera proposé en developer preview au troisième trimestre 2026
• Le support de Webpack, les builders @angular-devkit/build-angular, @ngtools/webpack et autres éléments associés passent au statut deprecated dans la v22
• Angular se concentre sur le support de TSGo dans l’application builder ; plus de détails sur ces dépréciations sont disponibles dans l’Angular CHANGELOG

[GN⁺]

Réactions sur Hacker News

• Je construis une application assez complexe avec Angular v21, et l’expérience est excellente grâce à la faible charge cognitive nécessaire pour concevoir et gérer les composants, l’état et le flux de données
  Signals et le signal store ont rendu tout cela très simple, et j’ai tout écrit à la main sans outil de codage IA

• Je dois reconnaître qu’aujourd’hui, Angular est vraiment agréable à utiliser
  C’est dommage que l’écosystème soit un peu rugueux, mais heureusement il y a énormément de fonctionnalités intégrées

  • J’ai eu la même expérience
    J’aimerais qu’Angular abandonne son compilateur atypique fortement couplé à tsc et adopte une approche plus modulaire, compatible avec n’importe quel compilateur TypeScript
    Les temps de cold build pour l’application et les tests unitaires restent médiocres, mais avec des agents de codage, on y pense un peu moins
  • Je me demande ce qui est rugueux dans l’écosystème
    Je n’ai jamais eu de problème pour trouver des packages, et la plupart suivent aussi très bien le flux des signals
  • Je me demande si les projets choisissent encore des choses comme RxJS, au point d’empiler des couches de code et de rendre le débogage pénible
    Ou si l’écosystème Angular a enfin retrouvé un peu de bon sens

• J’ai récemment fait passer un projet Angular assez complexe de la v14 à la v21
  Pendant quelques années, j’avais l’impression que le développement d’Angular ralentissait, mais quand on regarde d’un coup tous les changements entre ces versions, on a presque l’impression d’un framework entièrement nouveau

• Angular Aria a l’air vraiment très bien
  La documentation couvre bien même des scénarios complexes comme l’autocomplétion, et j’ai hâte de voir si cela peut remplacer l’autocomplétion pour lecteur d’écran que je devais auparavant développer moi-même

  • Je ne sais pas si j’ai mal vu quelque chose, mais sur https://angular.dev/guide/aria/overview#showcase, quand j’essaie la navigation au clavier, elle se fait avec les touches fléchées au lieu du plus courant tab/shift+tab
    Et même les onglets de leur propre documentation, juste au-dessus de cet exemple, utilisent tab/shift+tab pour déplacer le focus

• Cette fonctionnalité m’enthousiasme vraiment
  J’avais envie d’utiliser signal-forms et resources depuis leur phase expérimentale, et depuis que je suis passé aux signals, impossible de revenir en arrière
  Devoir utiliser RxJS à cause des formulaires était une vraie souffrance

  • Je me demande si quelqu’un pourrait expliquer un peu plus les signals
    Est-ce que c’est comparable au paradigme des signaux dans un moteur de jeu comme Godot, où des composants émettent des signaux auxquels d’autres composants s’abonnent quelle que soit leur profondeur, ou est-ce complètement différent ?

• Avant React, j’utilisais Angular avec plaisir, c’était une assez bonne époque, mais pour être honnête, j’en suis presque à oublier qu’Angular existe encore aujourd’hui
  Ce n’est pas pour faire l’éloge de React, et en ce moment j’aime plutôt l’approche htmx
  J’ai simplement l’impression que la concurrence se déplace désormais vers les frameworks ou langages que les agents gèrent le mieux, ainsi que vers la capacité des outils d’analyse statique ou au niveau du compilateur à attraper les erreurs

• J’aime bien le fait qu’Angular donne un peu une impression de Django
  Tout ce dont on a besoin est inclus, donc c’est facile à utiliser

  • On pourrait aussi bien utiliser Django tout court
    Ou prendre un backend plus rapide avec templates et rendu côté serveur, puis y brancher htmx pour obtenir une expérience de type application monopage sans la folie de l’écosystème JS complètement cassé

• Grâce à Angular, ma carrière de programmeur a été agréable et n’a jamais vraiment ressemblé à du travail
  Il n’y a rien de mieux que de travailler dans une langue qu’on aime, d’apprendre davantage, et d’être payé pour ça

• Cela fait un moment que je n’ai pas utilisé Angular
  En tant que personne qui utilise d’autres frameworks JavaScript comme Vue, React et Svelte, je me demande ce qui m’échappe
  J’aimerais savoir pourquoi certains choisissent Angular plutôt qu’un autre grand framework

  • De manière générale, je pense qu’Angular convient surtout si l’on veut transformer une application à l’ancienne en site web
    En particulier si l’on n’aime pas beaucoup JavaScript ni le développement web, et qu’on considère que le backend est la partie principale

• Entre import {signal} from "@angular/core" et import {form} from "@angular/forms/signals", on a une structure où signal vient du core et form de forms/signals
  J’ai l’impression qu’il y a une raison terminologique que je ne comprends pas
  À part ça, je suis impatient de réutiliser Angular après 10 ans, et ça a l’air plutôt bien

  • Les signals sont la structure de données de base d’Angular, donc ils sont dans core
    Les formulaires basés sur les signals font partie du module Forms, donc si on n’utilise pas les formulaires, on ne récupère pas cette surcharge
  • Angular propose plusieurs façons de gérer les formulaires
    Il s’agit probablement de l’import pour les nouveaux formulaires basés sur les signals