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 14Angular 180 of 21 done · 4 hops
1

Angular 14 → Angular 15

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

Update Command

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

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.

Migration / Adoption

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

2

Angular 15 → Angular 16

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

Update Command

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

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.

Migration / Adoption

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.

3

Angular 16 → Angular 17

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

Update Command

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

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.

Migration / Adoption

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
Migration / Adoption

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

4

Angular 17 → Angular 18

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

Update Command

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

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

Migration / Adoption

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.

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 14 to Angular 18

This plan covers the full path from Angular 14 to Angular 184 version hops and 21 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 14 → Angular 155 steps
  2. Angular 15 → Angular 165 steps
  3. Angular 16 → Angular 176 steps
  4. Angular 17 → Angular 185 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 14 before the first hop.
  • Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.