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 11Angular 150 of 20 done · 4 hops
1

Angular 11 → Angular 12

(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 12 requires Node.js 12.14 or newer and TypeScript 4.2+.

Update Command

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

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

Angular 12 deprecates View Engine; the framework is effectively Ivy-only going forward. Production build becomes the default for ng build, and IE11 support is deprecated.

Migration / Adoption

node-sass is no longer supported. Run the Sass migration and switch your styles to dart-sass. Nullish coalescing (??) is now supported in templates.

2

Angular 12 → Angular 13

(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 13 requires a current Node.js (12.20+, 14.15+, or 16.10+) and TypeScript 4.4. RxJS is upgraded to 7.4 for new apps.

Update Command

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

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

View Engine is completely removed — every library must ship Ivy (ngcc is gone). Internet Explorer 11 support is removed. Lazy routes use dynamic import(). Upgrade RxJS to 7 and review typing changes.

Deprecation / Removal

ModuleWithProviders now requires a generic type, entryComponents is no longer needed/used, and renderModuleFactory is removed. The migration fixes most of these automatically.

3

Angular 13 → Angular 14

(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 14 requires Node.js 14.15+ or 16.10+ and TypeScript 4.6 to 4.8.

Update Command

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

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

FormControl, FormGroup, and FormArray are now strictly typed. Existing forms code may stop compiling; the migration swaps to Untyped* variants so you can adopt typing gradually.

Migration / Adoption

Standalone components/directives/pipes arrive in developer preview, along with the inject() function, NgOptimizedImage (preview), functional Router guards (CanMatch), and the page Title strategy.

4

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.

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 11 to Angular 15

This plan covers the full path from Angular 11 to Angular 154 version hops and 20 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 11 → Angular 125 steps
  2. Angular 12 → Angular 135 steps
  3. Angular 13 → Angular 145 steps
  4. Angular 14 → Angular 155 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 11 before the first hop.
  • Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.