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 8Angular 110 of 15 done · 3 hops
1

Angular 8 → Angular 9

(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 9 needs Node.js 10.13 or newer and TypeScript 3.6 to 3.8. Update tslib to 1.10.

Update Command

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

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

Angular 9 switches to the Ivy rendering engine by default and runs ngcc to compile your dependencies. Expect stricter template type-checking and some changed runtime behavior; you can temporarily opt out with enableIvy: false.

Migration / Adoption

ng update applies schematics such as the static flag on @ViewChild/@ContentChild and Renderer → Renderer2. Differential loading emits modern + legacy bundles based on your browserslist.

2

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.

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.

3

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.

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.

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

This plan covers the full path from Angular 8 to Angular 113 version hops and 15 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 8 → Angular 95 steps
  2. Angular 9 → Angular 105 steps
  3. Angular 10 → Angular 115 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 8 before the first hop.
  • Update third-party libraries (including Angular Material/CDK) alongside each hop, and run your tests after each one.