Angular Upgrade Planner
Pick a source and target Angular version (8–22) for an ordered, checkable upgrade plan — ng update commands, breaking changes, deprecations, and migrations.
Choose your upgrade path
Angular 21 → Angular 22
(10 steps)Commit or stash all work, then make sure you are on the latest minor/patch of your current major before running ng update. Upgrade exactly one major at a time and run the app/tests after each hop.
Angular 22 requires TypeScript 6.0 (5.9 and below are no longer supported) and Node.js ^22.22.3, ^24.15.0 or ^26.0.0. Node 20 is dropped, and earlier Node 22/24 releases are below the minimum. Upgrade your toolchain before updating.
Check your Node.js & TypeScript versions for Angular 22 →Update the core framework and CLI together. This applies the official automatic migration schematics for this version.
ng update @angular/core@22 @angular/cli@22
A component without changeDetection now uses OnPush, and the old Default strategy is renamed Eager. The ng update migration adds changeDetection: ChangeDetectionStrategy.Eager to existing components, so behavior is preserved. Remove Eager component by component as you move to signals.
Route parameters and data are now inherited from all parent routes by default. There is no migration: set paramsInheritanceStrategy: 'emptyOnly' in withRouterConfig() to keep the old behavior, or review components that read route params/data.
HttpClient now uses fetch instead of XMLHttpRequest. The migration removes withFetch() calls, or adds withXhr() where you need XHR behavior such as upload progress events. reportProgress is deprecated in favor of reportUploadProgress and reportDownloadProgress.
In templates, a?.b now returns undefined instead of null when a is null or undefined, matching TypeScript. The migration wraps affected expressions in $safeNavigationMigration() to keep the old result; check code that compares with === null.
strictTemplates is enabled by default, so stricter template type errors can appear. canMatch guards receive a required currentSnapshot parameter (migrated automatically). The experimental Jest and Web Test Runner builders are removed.
Signal Forms are stable, resource()/rxResource()/httpResource() are production-ready, and the @angular/aria headless accessibility package leaves developer preview.
Reactive Forms → Signal Forms reference →@Service() is a shorter @Injectable({ providedIn: 'root' }) for classes that use inject(). It doesn't support constructor injection, so migrate constructors first, then switch services. @Injectable still works, so this is optional.
Convert constructors to inject() and @Service() online →ng generate @angular/core:inject ng generate @angular/core:service
Sources: Angular Update Guide: v21 → v22 · Angular 22.0.0 release notes · Announcing Angular v22 (Angular Blog)
Tip: Upgrade one major at a time and run ng update for each hop — it applies the official migration schematics automatically. Commit between hops and run your tests. This is a representative checklist of the major changes; always confirm specifics against the official Angular Update Guide for your exact versions.
Upgrading Angular 21 to Angular 22
This plan covers the full path from Angular 21 to Angular 22 — 1 version hop and 10 steps in total. Upgrade one major at a time, running ng update for each hop so the official migration schematics apply. Commit and run your tests between hops.
Breaking changes to check between Angular 21 and Angular 22
- OnPush is the default change detection strategy (Angular 21 → Angular 22): A component without changeDetection now uses OnPush, and the old Default strategy is renamed Eager. The ng update migration adds changeDetection: ChangeDetectionStrategy.Eager to existing components, so behavior is preserved. Remove Eager component by component as you move to signals.
- Route paramsInheritanceStrategy defaults to 'always' (Angular 21 → Angular 22): Route parameters and data are now inherited from all parent routes by default. There is no migration: set paramsInheritanceStrategy: 'emptyOnly' in withRouterConfig() to keep the old behavior, or review components that read route params/data.
- HttpClient uses the Fetch API by default (Angular 21 → Angular 22): HttpClient now uses fetch instead of XMLHttpRequest. The migration removes withFetch() calls, or adds withXhr() where you need XHR behavior such as upload progress events. reportProgress is deprecated in favor of reportUploadProgress and reportDownloadProgress.
- Template optional chaining returns undefined (Angular 21 → Angular 22): In templates, a?.b now returns undefined instead of null when a is null or undefined, matching TypeScript. The migration wraps affected expressions in $safeNavigationMigration() to keep the old result; check code that compares with === null.
Hops in this path
- Angular 21 → Angular 22 — 10 steps
Before you start
- Commit or stash your work and upgrade on a branch so you can roll back.
- Get on the latest minor/patch of Angular 21 before the first hop.
- Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.
Sources
Every step in this plan is checked against Angular's official documentation and release notes. Last reviewed .