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 20 → Angular 21
(7 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 21 requires Node.js 20.19+, 22.12+, or 24, and TypeScript 5.9 (up to <6.0).
Update the core framework and CLI together. This applies the official automatic migration schematics for this version.
ng update @angular/core@21 @angular/cli@21
New projects are generated zoneless by default. Existing apps keep Zone.js until they opt in, but review any code that relies on Zone.js patching (e.g. implicit change detection after async callbacks) before going zoneless.
New projects use Vitest, which runs tests significantly faster than Karma. Karma is deprecated — plan to migrate your test setup.
Several APIs that were deprecated back in Angular 19 are removed in 21. Rebuild and fix any remaining references; the migration handles common cases.
Signal Forms ship as an experimental API — a signal-based alternative to reactive forms. Try it in non-critical areas; it becomes stable in v22.
Angular 21 → Angular 22
(6 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 — TypeScript 5.9 and below are no longer supported. Node.js 20 support is dropped; the minimum is Node 22 (also supports 24 and 26). Upgrade your toolchain before updating.
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 that does not set changeDetection now uses ChangeDetectionStrategy.OnPush instead of the old check-always behavior. Audit components that relied on automatic checking — they may need signals, markForCheck, or an explicit Default strategy.
Route parameters and data are now inherited from all parent routes by default. Review components that read route params/data to ensure they still resolve the expected values.
Signal Forms are stable, and resource()/rxResource()/httpResource() are production-ready. Selectorless components let you import components directly into templates without a string selector for better type safety and refactoring.
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 20 to Angular 22
This plan covers the full path from Angular 20 to Angular 22 — 2 version hops and 13 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.
Hops in this path
- Angular 20 → Angular 21 — 7 steps
- Angular 21 → Angular 22 — 6 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 20 before the first hop.
- Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.