How to Change the Angular Version in an Existing Project

Changing the Angular version in an existing project may involve upgrading to a newer release or moving to an older version for compatibility reasons. The correct approach depends on the current Angular version, the target version, and the dependencies used by the application.

This article explains how to upgrade or downgrade Angular safely.

Methods to Change the Angular Version

1. Use ng update for Angular Upgrades

For supported Angular upgrades, the recommended approach is to use the Angular CLI's ng update command.

To update Angular to the latest supported version:

ng update @angular/core@latest @angular/cli@latest

The Angular CLI can update package versions and run migration schematics required for the target Angular version.

For a specific version, use:

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

For example:

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

This approach is generally preferable to manually changing package versions because Angular migrations can automatically update application code and configuration files.

2. Use Angular Migration Schematics

Angular provides migration schematics to help projects adapt to breaking changes between versions.

For example:

ng update @angular/core@<target_version>

Depending on the target version and the current project configuration, Angular may apply code migrations and dependency updates.

For larger version jumps, it is often safer to upgrade incrementally rather than attempting to move across several major versions at once.

For example:

Angular 14 → Angular 15 → Angular 16 → Angular 17

Incremental upgrades make it easier to identify compatibility problems and migration issues.

3. Manually Update Angular Dependencies

In some cases, you may need to manually specify Angular package versions in package.json.

For example:

{
  "dependencies": {
    "@angular/common": "15.2.0",
    "@angular/compiler": "15.2.0",
    "@angular/core": "15.2.0",
    "@angular/forms": "15.2.0",
    "@angular/platform-browser": "15.2.0",
    "@angular/platform-browser-dynamic": "15.2.0",
    "@angular/router": "15.2.0"
  }
}

After updating the dependencies, run:

npm install

The Angular CLI version should also be compatible with the Angular framework version used by the project.

Manual dependency updates can be useful when targeting a specific version, but they do not automatically apply migration steps. For major upgrades, ng update is generally the safer option.

4. Downgrading Angular

Downgrading Angular requires additional care because migration changes applied during a previous upgrade may not be automatically reversible.

For example, to install a specific Angular version:

npm install @angular/core@12 @angular/common@12 @angular/compiler@12

You should also ensure that all Angular framework packages use compatible versions.