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 8 → Angular 9
(5 steps)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 9 needs Node.js 10.13 or newer and TypeScript 3.6 to 3.8. Update tslib to 1.10.
Check your Node.js & TypeScript versions for Angular 9 →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
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.
ng update applies the v9 schematics: Renderer → Renderer2, adding @Injectable/@Directive to undecorated classes, the ModuleWithProviders generic, and removing the now-optional { static: false } from @ViewChild/@ContentChild queries.
Sources: Angular Update Guide: v8 → v9 · Angular 9.0.0 release notes
Angular 9 → Angular 10
(5 steps)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 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 the core framework and CLI together. This applies the official automatic migration schematics for this version.
ng update @angular/core@10 @angular/cli@10
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.
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
Angular 10 → Angular 11
(5 steps)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 11 requires TypeScript 4.0 and drops support for IE9, IE10, and IE mobile.
Check your Node.js & TypeScript versions for Angular 11 →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
Some async test helpers and CollectionChangeRecord are deprecated. Update to the recommended TestBed patterns.
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
Angular 11 → Angular 12
(5 steps)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 12 requires Node.js 12.14 or newer and TypeScript 4.2+.
Check your Node.js & TypeScript versions for Angular 12 →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
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.
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
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 12
This plan covers the full path from Angular 8 to Angular 12 — 4 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.
Breaking changes to check between Angular 8 and Angular 12
- Ivy becomes the default compiler/runtime (Angular 8 → Angular 9): 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.
- 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.
Hops in this path
- Angular 8 → Angular 9 — 5 steps
- Angular 9 → Angular 10 — 5 steps
- Angular 10 → Angular 11 — 5 steps
- Angular 11 → Angular 12 — 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 8 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 .
- Angular Update Guide: v8 → v9
- Angular 9.0.0 release notes
- Angular Update Guide: v9 → v10
- Angular 10.0.0 release notes
- Angular Update Guide: v10 → v11
- Angular 11.0.0 release notes
- Angular Update Guide: v11 → v12
- Angular 12.0.0 release notes
- Angular version compatibility (Node.js, TypeScript, RxJS)
- Angular Update Guide