Introduction

Upgrading a real Angular application from v19 to v22 may seem intimidating, but Angular's built-in migration tools make the process smooth and predictable. The recommended approach is to upgrade one major version at a time so that migrations are applied safely.

This guide explains:

Upgrade Path: Angular 19 → 22

Angular major versions should be upgraded sequentially:

19 → 20 → 21 → 22

Each upgrade uses:

ng update @angular/core@<version> @angular/cli@<version>

Step 1: Upgrade Angular 19 → 20

1. Check Available Updates

Run:

ng update

Meaning

Angular CLI will:

  1. Read versions from package.json

  2. Compare them with available versions

  3. Recommend update commands

  4. Show packages requiring migration

2. CLI Output Example

You may see something similar to:

@angular-eslint/schematics 19.2.0 -> 20.x.x
@angular/cdk 19.2.0 -> 20.x.x
@angular/cli 19.2.0 -> 20.x.x
@angular/core 19.2.0 -> 20.x.x

Meaning

Update Commands

Update Angular Core & CLI

ng update @angular/cli@20 @angular/core@20

Update Angular CDK

If using Angular Material:

ng update @angular/cdk@20

Update Angular ESLint

ng update @angular-eslint/schematics

Validate the Application

Run:

ng serve

ng test

ng build --configuration production

Fix any compilation or test issues.

Commit your code:

git add .
git commit -m "Angular 19 to 20 upgrade"

Step 2: Upgrade Angular 20 → 21

1. Check Updates

Run:

ng update

2. CLI Output Example

You may see something similar to:

@angular-eslint/schematics 20.x.x -> 21.x.x
@angular/cdk 20.x.x -> 21.x.x
@angular/cli 20.x.x -> 21.x.x
@angular/core 20.x.x -> 21.x.x

Update Commands

Update Angular Core & CLI

ng update @angular/cli@21 @angular/core@21

Update Angular CDK

ng update @angular/cdk@21

Update Angular ESLint

ng update @angular-eslint/schematics

Validate the Application

Run:

ng serve

ng test

ng build --configuration production

Fix any compilation or test issues.

Commit your code:

git add .
git commit -m "Angular 20 to 21 upgrade"

Step 3: Upgrade Angular 21 → 22

1. Check Updates

Run:

ng update

2. CLI Output Example

You may see something similar to:

@angular-eslint/schematics 21.x.x -> 22.x.x
@angular/cdk 21.x.x -> 22.x.x
@angular/cli 21.x.x -> 22.x.x
@angular/core 21.x.x -> 22.x.x

Update Commands

Update Angular Core & CLI

ng update @angular/cli@22 @angular/core@22

Update Angular CDK

ng update @angular/cdk@22

Update Angular ESLint

ng update @angular-eslint/schematics

Validate the Application

Run:

ng serve

ng test

ng build --configuration production

Fix any compilation or test issues.

Commit your code:

git add .
git commit -m "Angular 21 to 22 upgrade"

Post-Upgrade Verification

Verify project versions:

ng version

Expected output:

Angular CLI: 22.x.x
Angular: 22.x.x
TypeScript: Compatible Version
Node: Supported Version

Common Issues and Fixes

Dependency Conflicts

Check outdated packages:

npm outdated

Update remaining dependencies:

npm update

Clean Install

If packages become inconsistent:

rm -rf node_modules
rm package-lock.json

Then run:

npm install

Angular Material Issues

If you're using Angular Material:

ng update @angular/material

or:

ng update @angular/cdk

Final Upgrade Checklist

Step

Status

Upgrade 19 → 20

✅

Run Build & Tests

✅

Upgrade 20 → 21

✅

Run Build & Tests

✅

Upgrade 21 → 22

✅

Run Build & Tests

✅

Verify ng version

✅

Deploy to Test Environment

✅

Best Practice

Always commit your code after every major version upgrade:

19 → 20 → Commit
20 → 21 → Commit
21 → 22 → Commit

This makes troubleshooting much easier and allows quick rollback if any migration introduces issues.

Summary

Upgrading Angular from version 19 to 22 should be performed sequentially through versions 20 and 21 rather than attempting to jump directly to version 22. Using ng update, validating the application after each migration, running tests and production builds, and committing the changes after every major upgrade provides a structured approach for managing the migration. Checking dependencies, performing a clean installation when necessary, and verifying the final Angular, TypeScript, and Node versions can help identify and resolve common upgrade issues.