Angular Upgrade Planner

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.

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.

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.

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.

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

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.

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. RxJS is upgraded to 7.4 for new apps.

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

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

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.

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.

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 15 requires a current Node.js (14.20+, 16.13+, or 18.10+) and TypeScript 4.8 or 4.9.

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

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.

bootstrapApplication, provideRouter, provideHttpClient, functional Router guards, the directive composition API, and NgOptimizedImage are all stable. Consider adopting standalone bootstrap.

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 16 requires Node.js 16.14+ or 18.10+ and TypeScript 4.9.3 up to 5.1.

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

ng update @angular/core@16 @angular/cli@16

Full non-destructive hydration is available with provideClientHydration, and server-side rendering moves toward @angular/ssr. An esbuild-based dev server is in developer preview.

Angular Signals arrive in developer preview, along with takeUntilDestroyed/DestroyRef, required inputs, and binding Router data/params/title to component inputs via withComponentInputBinding. Self-closing tags are supported.

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 17 requires Node.js 18.13+ or 20.9+ and TypeScript 5.2 up to 5.4.

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

ng update @angular/core@17 @angular/cli@17

New applications use the esbuild + Vite application builder (@angular-devkit/build-angular:application) with faster builds and a Vite dev server. Existing apps keep the webpack builder until migrated. SSR is offered during ng new.

New built-in control flow replaces *ngIf/*ngFor/*ngSwitch — run ng generate @angular/core:control-flow to migrate templates. Deferrable views (@defer) enable lazy loading of template blocks.

ng generate @angular/core:control-flow

signal/computed/effect are stable, afterRender/afterNextRender hooks are added, and the View Transitions API is supported via withViewTransitions.