Skip to content
ToolShedby Wasim Shaikh

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 9 → Angular 140 of 25 done · 5 hops
1

Angular 9 → Angular 10

(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 10 requires TypeScript 3.9 and bumps several dependencies. tslib moves to a peer dependency.

Check your Node.js & TypeScript versions for Angular 10 →
Update Command

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

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

A new default browserslist drops some older browsers, and projects get stricter settings. Angular Material adds a new date range picker. Review tsconfig and any removed browser support.

Deprecation / Removal

ViewEncapsulation.Native, WrappedValue, and some ESM5/FESM5 outputs are deprecated. Consider ng new --strict for new projects.

Sources: Angular Update Guide: v9 → v10 · Angular 10.0.0 release notes

2

Angular 10 → Angular 11

(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 11 requires TypeScript 4.0 and drops support for IE9, IE10, and IE mobile.

Check your Node.js & TypeScript versions for Angular 11 →
Update Command

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

ng update @angular/core@11 @angular/cli@11
Deprecation / Removal

Some async test helpers and CollectionChangeRecord are deprecated. Update to the recommended TestBed patterns.

Migration / Adoption

webpack 5 support is available (experimental) via a package.json resolutions entry. Hot Module Replacement can be enabled with ng serve --hmr. Automatic inline fonts and faster builds are included.

Sources: Angular Update Guide: v10 → v11 · Angular 11.0.0 release notes

3

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+.

Check your Node.js & TypeScript versions for Angular 12 →
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.

Sources: Angular Update Guide: v11 → v12 · Angular 12.0.0 release notes

4

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. New apps get RxJS 7.4; existing apps can stay on RxJS 6.5+.

Check your Node.js & TypeScript versions for Angular 13 →
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 removed from the framework and libraries are now published in Ivy partial-compilation format. Older View Engine libraries still work through ngcc until v16. Internet Explorer 11 support is removed, and string-based loadChildren must use dynamic import().

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.

Sources: Angular Update Guide: v12 → v13 · Angular 13.0.0 release notes

5

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.

Check your Node.js & TypeScript versions for Angular 14 →
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.

Convert constructor injection to inject() online →

Sources: Angular Update Guide: v13 → v14 · Angular 14.0.0 release notes

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

This plan covers the full path from Angular 9 to Angular 14 — 5 version hops and 25 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.

Breaking changes to check between Angular 9 and Angular 14

  • View Engine is deprecated — Ivy only (Angular 11 → Angular 12): 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.
  • View Engine removed and IE11 support dropped (Angular 12 → Angular 13): View Engine is removed from the framework and libraries are now published in Ivy partial-compilation format. Older View Engine libraries still work through ngcc until v16. Internet Explorer 11 support is removed, and string-based loadChildren must use dynamic import().
  • Typed Reactive Forms (Angular 13 → Angular 14): 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.

Hops in this path

  1. Angular 9 → Angular 10 — 5 steps
  2. Angular 10 → Angular 11 — 5 steps
  3. Angular 11 → Angular 12 — 5 steps
  4. Angular 12 → Angular 13 — 5 steps
  5. Angular 13 → Angular 14 — 5 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 9 before the first hop.
  • Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.

Sources

Every step in this plan is checked against Angular's official documentation and release notes. Last reviewed .