Angular 21 (novembre 2025) et 22 (juin 2026) achèvent le passage à l’« Angular moderne » : applications zoneless, OnPush par défaut, Signal Forms et resources stables, plus de nouvelles API de DI (@Service, injectAsync). Voici les changements importants, tirés du changelog officiel, chacun lié à la page qui l’explique.
- Change Detection
- zoneless par défaut
- OnPush par défaut
- Formulaires
- Signal Forms expérimental
- Signal Forms stable
- Données asynchrones
- resource / httpResource expérimental
- stable + chain + params de statut
- DI
- —
@Service(),injectAsync()- Template
- regex, spread, fonctions fléchées, instanceof,
@default never - commentaires dans les balises,
?.→ undefined,@boundary(22.2) - HTTP
- HttpClient sans configuration
- Fetch par défaut
- Tests
- Vitest par défaut
- getLastFixture, createDirective (22.2)
- UI
- Angular Aria
- Aria arrive à maturité, WebMCP expérimental
Tous les changements, filtrables
Filtrez par version et par type. « Rupture » = ce qu’il faut vérifier lors de la mise à jour.
51 changements
22.2
6 changements- nouveau @boundary (developer preview)Un bloc qui isole les erreurs de rendu : @boundary { … } @error (let e = $error; let reset = $reset) { … }.
- nouveau TestBed.createDirective()Testez des directives sans composant hôte manuel.
- nouveau Router : RedirectCommand levée, withAutoCleanupInjectors stableVous pouvez lever (throw) une RedirectCommand depuis des guards/resolvers ; les injecteurs de route peuvent être détruits automatiquement.
- nouveau Les templates peuvent accéder aux membres privésLa recommandation reste protected pour les membres utilisés dans le template.
- nouveau viewChild / contentChild avec read: InjectorObtenez l’injecteur d’un enfant via une requête.
- nouveau Signal Forms : champs masqués permanentsPlus des améliorations pour l’intégration de WebMCP.
22.1
3 changements22.0
juin 2026 19 changements- rupture OnPush par défautLes composants sans changeDetection sont OnPush. ng update ajoute Eager là où c’est nécessaire.
- stable Signal Forms — API publiqueform(), [formField], [formRoot], validateurs, FormValueControl, validateHttp / validateAsync avec debounce, reloadValidation, getError().
- stable resource / rxResource / httpResourceStables. Nouveautés : ResourceParamsStatus.IDLE/LOADING, ctx.chain(), cache SSR, valeurs synchrones dans les flux.
- nouveau @Service()Nouveau décorateur pour les services fournis automatiquement dans root. Uniquement inject() (pas de DI par constructeur). Options : autoProvided, factory.
- nouveau injectAsync()Services chargés en lazy loading, avec prefetch : onIdle.
- nouveau debounced() (expérimental)Une version avec debounce d’un signal, sous forme de Resource.
- nouveau Commentaires dans les balises<div // comment class="x">.
- nouveau @defer (on idle(500))Timeout pour idle et un service idle configurable (provideIdleServiceWith).
- nouveau TestBed.getLastFixture()La dernière fixture créée.
- nouveau WebMCP (expérimental)provideExperimentalWebMcpTools / declareExperimentalWebMcpTool — l’application expose des outils aux agents IA dans le navigateur ; les signal forms peuvent être exposés automatiquement.
- rupture Fetch comme backend HTTP par défautwithFetch() est déprécié. Pour la progression d’un upload : withXhr(). reportProgress → reportUploadProgress / reportDownloadProgress.
- rupture paramsInheritanceStrategy: "always"Les routes enfants héritent des params et des data de tous leurs parents.
- rupture ?. renvoie undefined dans les templatesComme en TypeScript. Les diagnostics nullishCoalescingNotNullable / optionalChainNotNullable peuvent apparaître.
- rupture TypeScript 6, pas de Node 20TypeScript < 6 n’est plus pris en charge.
- rupture Supprimés : ComponentFactoryResolver, ComponentFactory, createNgModuleRef, provideRoutes, Hammer.jsUtilisez directement la classe dans createComponent, createNgModule, provideRouter.
- rupture Compilateur plus strictErreur pour les inputs/outputs liés deux fois, les sélecteurs correspondant à plusieurs éléments ; les attributs data-* ne lient plus d’inputs.
- rupture min/max dans Signal Forms : numériques uniquementIls n’acceptent plus les chaînes.
- rupture CanMatchFn : currentSnapshot est obligatoireLes implémentations de CanMatch sous forme de classe doivent accepter un troisième argument.
- nouveau Hydration incrémentale par défautwithIncrementalHydration() n’est plus nécessaire pour le SSR.
21.2
6 changements- nouveau Fonctions fléchées et instanceof dans les templatesitems().filter(i => i.ok), err instanceof HttpErrorResponse.
- nouveau @default never; — switch exhaustifUn cas oublié dans une union devient une erreur de compilation.
- nouveau ChangeDetectionStrategy.EagerAlias de Default, en préparation de OnPush par défaut en v22.
- nouveau Snapshots de Resourceresource.snapshot() et resourceFromSnapshots() pour composer des resources.
- nouveau Signal Forms : FormRoot, erreurs de parsing, SignalFormControlLa directive [formRoot], les erreurs de parsing pour les inputs natifs, la compatibilité avec Reactive Forms.
- nouveau ngTemplateOutlet avec un injecteur « outlet »[ngTemplateOutletInjector]="'outlet'".
21.1
4 changements- nouveau @switch avec plusieurs cas@case (a) @case (b) { … } — le même bloc pour plusieurs valeurs.
- nouveau Spread dans les templates[...a, ...b], { ...obj }, fn(...args).
- nouveau Focus sur un champ Signal Formsfield().focus() donne le focus au contrôle lié.
- nouveau Router : scroll, nettoyage, isActive comme signalContrôles du scroll à la navigation, une fonction isActive() qui renvoie un signal, des wildcards avec segments.
21.0
novembre 2025 13 changements- nouveau Zoneless par défautLes nouvelles applications n’incluent plus zone.js. La Change Detection est déclenchée par les signals, les événements et markForCheck.
- nouveau Signal Forms (expérimental)form(), [field] / [formField], validation par schéma, debounce(). Devient une API publique en v22.
- nouveau Vitest comme runner par défautng test utilise Vitest via @angular/build:unit-test. Karma est déprécié.
- nouveau Angular AriaDirectives headless et accessibles : Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree.
- nouveau HttpClient sans configurationLes services HTTP sont fournis dans root ; provideHttpClient() ne sert plus qu’à la configuration.
- nouveau Regex dans les templatesVous pouvez écrire /^\d+$/.test(x) directement dans les expressions.
- nouveau SimpleChanges génériquengOnChanges(changes: SimpleChanges<MyCmp>) — clés typées.
- nouveau Options d’IntersectionObserver dans @defer@defer (on viewport({ rootMargin: "200px" })).
- nouveau Migrations ngClass → class, ngStyle → styleng g @angular/core:ngclass-to-class et ngstyle-to-style.
- rupture La vérification de types des host bindings est activée par défautDes erreurs de type jusque-là cachées dans host: {} peuvent apparaître au build. On peut la désactiver temporairement avec typeCheckHostBindings: false.
- rupture TypeScript ≥ 5.9Les anciennes versions de TypeScript ne sont plus prises en charge.
- rupture lastSuccessfulNavigation est un signalrouter.lastSuccessfulNavigation() doit être appelé.
- rupture Supprimés : moduleId, interpolation personnalisée, NgModuleFactoryAnciennes options de métadonnées retirées de l’API.
Comment mettre à jour
# Mettez à jour étape par étape (ne sautez pas de versions majeures)
ng update @angular/core@21 @angular/cli@21
ng update @angular/core@22 @angular/cli@22
# Guide interactif avec toutes les étapes pour votre combinaison de versions :
# https://angular.dev/update-guide
# Ce que ng update fait automatiquement pour la v22 :
# - ajoute ChangeDetectionStrategy.Eager là où changeDetection n’était pas défini
# - conserve HttpXhrBackend là où il est nécessaire (withXhr)
# - ajoute currentSnapshot à CanMatch
# - désactive temporairement les nouveaux diagnostics pour ?. et ??
# - active strictTemplates dans tsconfigOrdre recommandé après la mise à jour
- Build et tests au vert, avec
Eagerajouté automatiquement. - Déplacez l’état vers des signals, fonctionnalité par fonctionnalité (signals, resource).
- Retirez
Eagerdes composants migrés et vérifiez (change detection). - Écrivez les nouveaux formulaires directement avec Signal Forms ; les anciens restent en Reactive tant que vous n’avez pas de raison de les migrer.