Wasim's Site

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 19Angular 210 of 14 done · 2 hops
1

Angular 19 → Angular 20

(7 steps)
Pre-flight

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.

Tooling / Requirements

Angular 20 requires Node.js 20.19+, 22.12+, or 24, and TypeScript 5.8 (up to <6.0).

Update Command

Update the core framework and CLI together. This applies the official automatic migration schematics for this version.

ng update @angular/core@20 @angular/cli@20
Breaking Change

Invalid host binding expressions now throw compile-time errors instead of failing silently. Fix any host bindings the compiler flags after updating.

Breaking Change

The DOCUMENT token moved from @angular/common to @angular/core. The ng update migration rewrites the imports automatically.

Deprecation / Removal

The structural directives are deprecated in favor of built-in control flow (@if/@for/@switch) and are scheduled for removal around v22. Run the control-flow migration. TestBed.get() is removed (auto-migrated to TestBed.inject()), and TestBed.flushEffects() is deprecated in favor of TestBed.tick().

ng generate @angular/core:control-flow
Migration / Adoption

All core reactivity primitives — signal, computed, effect, linkedSignal, signal-based queries and inputs — are now stable. Zoneless change detection moves to developer preview and the flag is renamed from --experimental-zoneless to --zoneless.

2

Angular 20 → Angular 21

(7 steps)
Pre-flight

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.

Tooling / Requirements

Angular 21 requires Node.js 20.19+, 22.12+, or 24, and TypeScript 5.9 (up to <6.0).

Update Command

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
Breaking Change

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.

Breaking Change

New projects use Vitest, which runs tests significantly faster than Karma. Karma is deprecated — plan to migrate your test setup.

Deprecation / Removal

Several APIs that were deprecated back in Angular 19 are removed in 21. Rebuild and fix any remaining references; the migration handles common cases.

Migration / Adoption

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.

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 19 to Angular 21

This plan covers the full path from Angular 19 to Angular 212 version hops and 14 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

  1. Angular 19 → Angular 207 steps
  2. Angular 20 → Angular 217 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 19 before the first hop.
  • Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.