Angular Upgrade Planner

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 15 requires a current Node.js (14.20+, 16.13+, or 18.10+) and TypeScript 4.8 or 4.9.

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

ng update @angular/core@15 @angular/cli@15

Angular Material components are rebuilt on Material Design Components (MDC). DOM structure and CSS change — audit custom Material styles and run the Material migration. Legacy components are available under @angular/material/legacy-* temporarily.

bootstrapApplication, provideRouter, provideHttpClient, functional Router guards, the directive composition API, and NgOptimizedImage are all stable. Consider adopting standalone bootstrap.

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 16 requires Node.js 16.14+ or 18.10+ and TypeScript 4.9.3 up to 5.1.

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

ng update @angular/core@16 @angular/cli@16

Full non-destructive hydration is available with provideClientHydration, and server-side rendering moves toward @angular/ssr. An esbuild-based dev server is in developer preview.

Angular Signals arrive in developer preview, along with takeUntilDestroyed/DestroyRef, required inputs, and binding Router data/params/title to component inputs via withComponentInputBinding. Self-closing tags are supported.

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 17 requires Node.js 18.13+ or 20.9+ and TypeScript 5.2 up to 5.4.

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

ng update @angular/core@17 @angular/cli@17

New applications use the esbuild + Vite application builder (@angular-devkit/build-angular:application) with faster builds and a Vite dev server. Existing apps keep the webpack builder until migrated. SSR is offered during ng new.

New built-in control flow replaces *ngIf/*ngFor/*ngSwitch — run ng generate @angular/core:control-flow to migrate templates. Deferrable views (@defer) enable lazy loading of template blocks.

ng generate @angular/core:control-flow

signal/computed/effect are stable, afterRender/afterNextRender hooks are added, and the View Transitions API is supported via withViewTransitions.

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 18 requires Node.js 18.19.1+, 20.11.1+, or 22, and TypeScript 5.4 or 5.5.

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

ng update @angular/core@18 @angular/cli@18

provideExperimentalZonelessChangeDetection lets you trial zoneless apps, and event replay for SSR is available in preview. Review zone-dependent code before trying zoneless.

Angular Material 3 is stable, the build tooling is published as @angular/build, deferrable views and built-in control flow are stable, ng-content supports default/fallback content, and route redirects can be functions.

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 19 requires Node.js 18.19.1+, 20.11.1+, or 22, and TypeScript 5.5 up to 5.8.

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

ng update @angular/core@19 @angular/cli@19

Components, directives, and pipes are standalone by default; NgModule-based declarations must set standalone: false. Run the standalone migration, and optionally enable strictStandalone.

Incremental hydration (preview), route-level render mode (SSR/SSG/CSR), the experimental resource() API, linkedSignal, @let template variables, and HMR for styles are introduced.

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 20 requires Node.js 20.19+, 22.12+, or 24, and TypeScript 5.8 (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@20 @angular/cli@20

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

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

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

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.

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.