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 17 → Angular 190 of 10 done · 2 hops
1

Angular 17 → Angular 18

(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 18 requires Node.js 18.19.1+, 20.11.1+, or 22, and TypeScript 5.4 or 5.5.

Update Command

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

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

provideExperimentalZonelessChangeDetection lets you trial zoneless apps, and event replay for SSR is available in preview. Review zone-dependent code before trying zoneless.

Migration / Adoption

Angular Material 3 is stable, the build tooling is published as @angular/build, deferrable views and built-in control flow are stable, ng-content supports default/fallback content, and route redirects can be functions.

2

Angular 18 → Angular 19

(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 19 requires Node.js 18.19.1+, 20.11.1+, or 22, and TypeScript 5.5 up to 5.8.

Update Command

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

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

Components, directives, and pipes are standalone by default; NgModule-based declarations must set standalone: false. Run the standalone migration, and optionally enable strictStandalone.

Migration / Adoption

Incremental hydration (preview), route-level render mode (SSR/SSG/CSR), the experimental resource() API, linkedSignal, @let template variables, and HMR for styles are introduced.

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.

Plan Any Angular Upgrade Path

Angular upgrades happen one major at a time: you run ng update for each version, which applies that release's migration schematics. This planner stitches together the steps for every hop between your current version and your target — so an Angular 15 → 19 plan includes the new control flow and esbuild builder at 17, standalone-by-default at 19, and the right Node/TypeScript bumps along the way, in order.

Supported Versions

Angular 8→Angular 9→Angular 10→Angular 11→Angular 12→Angular 13→Angular 14→Angular 15→Angular 16→Angular 17→Angular 18→Angular 19→Angular 20→Angular 21→Angular 22

How to Use This Planner

  1. Select your current and target versions. The URL updates so you can bookmark or share the exact path.
  2. Work hop by hop. Each numbered section is one major-version transition, with the ng update command and steps ordered pre-flight → requirements → update → breaking → deprecation → migration.
  3. Filter by category to focus on, say, only breaking changes or only requirements.
  4. Tick off steps as you complete them and watch the progress bar.
  5. Export the plan as Markdown to drop into a PR description or upgrade ticket.

Frequently Asked Questions

Do I have to upgrade one major version at a time?
Yes. The supported path is to move through Angular majors in order, running ng update @angular/core@N @angular/cli@N for each one. ng update applies that version's official migration schematics. Skipping versions skips those migrations and is unsupported. This planner lists the steps for every hop between your source and target.
What does ng update actually do?
It updates the Angular packages and runs automated migration schematics for the new version — rewriting code for renamed/moved APIs, the new control flow syntax, standalone components, and more. You should still review breaking changes, update third-party libraries, and run your tests after each hop.
What are the step categories?
Pre-flight (do before you start), Tooling / Requirements (Node.js and TypeScript versions), Update Command (the ng update line), Breaking Change (code or config that must change), Deprecation / Removal (APIs to stop using), and Migration / Adoption (recommended schematics and new features). Within each hop the planner orders steps in that sequence.
Are the Node and TypeScript versions accurate?
The Node.js and TypeScript requirements are taken from Angular's official version compatibility reference, and the newest releases (Angular 20, 21, 22) are based on their official release notes. Always confirm the exact requirement for your target version, since patch-level support can change.
Is this an official, exhaustive upgrade guide?
No. It is a curated checklist of the most important steps for planning an upgrade. For the complete, code-aware migration steps, use the official Angular Update Guide and test on a branch first.
Can I export the checklist?
Yes. Tick off steps as you complete them, then use Copy as Markdown or Download .md to paste the plan — with your progress — into a ticket or PR description.

Official Resources