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 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
Angular 12 → Angular 13
(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 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 the core framework and CLI together. This applies the official automatic migration schematics for this version.
ng update @angular/core@13 @angular/cli@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().
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
Angular 13 → Angular 14
(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 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 the core framework and CLI together. This applies the official automatic migration schematics for this version.
ng update @angular/core@14 @angular/cli@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.
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
- Angular 9 → Angular 10 — 5 steps
- Angular 10 → Angular 11 — 5 steps
- Angular 11 → Angular 12 — 5 steps
- Angular 12 → Angular 13 — 5 steps
- 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 .
- 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 Update Guide: v12 → v13
- Angular 13.0.0 release notes
- Angular Update Guide: v13 → v14
- Angular 14.0.0 release notes
- Angular version compatibility (Node.js, TypeScript, RxJS)
- Angular Update Guide