Upgrade your Application to v15 🚀

In this tutorial, you'll learn about the required steps that you need to follow to appropriately migrate your existing apps to Angular 15 😲

We have two ways to update your application to the latest version:

• Use the ng update command of the Angular CLI
• Use nx migate command of the Nx monorepo tool

For Nx: https://nx.dev/packages/nx/documents/migrate
For Angular Cli: https://angular.io/cli/update

What is the ng update Command?

ng update is a command available in Angular CLI which is used to update your application and its dependencies. You can use it to update all packages in the package.json file via the --all option that could take true or false or specific versions via the --packages option. You can see all the available commands from the official docs.

Why Upgrade to Angular 15

Angular 15 brings many improvements and new features. This section only contains some of the innovations in v15.

For a comprehensive list of the new features, see the Angular blog post on the update to v15.

Upgrading from Angular v13 to v14

You can run the following commands from an angular v13 project to upgrade to the latest version v14:

ng update @angular/core@14 @angular/cli@14

Upgrading from Angular v14 to v15

You can run the following commands from an angular v14 project to upgrade to the latest version v15:

ng update @angular/core@15 @angular/cli@15

Steps for Upgrading from Angular 7 to 9:

Step 1:

Navigate to your project's folder and install the project's dependencies using the following commands:

ng version

Your global Angular CLI version (9.0.0-rc.2) is greater than your local
version (7.1.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Angular CLI: 7.1.4
Node: 10.16.3
OS: win32 ia32
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

This indicates that the Angular CLI v7.1.4 is used in our project and that the local version is used instead of the global version (v9.0.0-rc.2) that we already have installed on our system.

Step 2 - Identifying how To Upgrade

The Angular team made upgrading much easier than before. You can get the commands that you need to run to update your project from an Angular version to another one by using the ]Angular Update Guide](https://update.angular.io/?v=7.0-9.0).

After specifying the versions, you'll get a warning saying We do not recommend moving across multiple major versions. since we are moving from v7 to v9:

We'll take this warning into consideration and we'll first upgrade our project from Angular 7 to Angular 8.

So change the target version to v8.0

It will show you a list of the things you need to do:

Make sure you are using Node 10 or later.

In you command-line interface run the following command:

ng update

We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       7.1.4 -> 8.3.19          ng update @angular/cli
      @angular/core                      7.1.4 -> 8.2.14          ng update @angular/core
      rxjs                               6.3.3 -> 6.5.3           ng update rxjs


    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

So, let's start by updating the core framework and the CLI to v8.2.14 and v8.3.19 respectively using the following command:

ng update @angular/cli @angular/core

Note: On Windows I had to run npm install after ng update @angular/cli @angular/core to install the new versions of the dependencies.

Now, let's check the new version of Angular using the following command:

ng --version

the output will be:

Angular CLI: 8.3.19
Node: 10.16.3
OS: win32 ia32
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  7.1.4
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.23.1

You can see that we have successfully updated Angular CLI to v8.3.19, Angular to v8.2.14 and different core packages. Even TypeScript is bumped to v3.5.3.

Updating from Angular v8.2.3 to The Latest Angular 9 Pre-Release Version

After updating our project to Angular 8, we will proceed to update it to the latest Angular 9 version.

Head back to your terminal and run the ng update command again. You will get the following output:

Using package manager: 'npm'
Collecting installed dependencies...
Found 32 dependencies.
    We analyzed your package.json and everything seems to be in order. Good work!

This is because Angular 9 is still in RC version ie in pre release but the tool gives only stable versions.

If you want to get pre-release versions, you need to use the --next flag as follows:

ng update --next

the output will be:

...
Name                               Version                  Command to update--------------------------------------------------------------------------------
@angular/cli                       8.3.19 -> 9.0.0-rc.2     ng update @angular/cli --next
@angular/core                      8.2.14 -> 9.0.0-rc.2     ng update @angular/core --next

Next, you can update to the latest versions of the CLI and core framework using the following command:

ng update @angular/cli @angular/core --next

In my case, I had an error saying Repository is not clean. Please commit or stash any changes before updating.

It seems this is a kind of abug that you can solve using the --allow-dirty flag:

ng update @angular/cli @angular/core --next --allow-dirty

Now, you can serve your app to see updated our old Angular 7 project to Angular 8 and finally to Angular 9 with:

ng serve

Angular Experts Suggestion 🚀:

Go Step by step with incremental upgrade from steps mentioned below:

• v7 to v8
• v8 to v9
• v9 to v10
• v10 to v11
• v11 to v12
• v12 to v13
• v13 to v14
• v14 to v15

For Nx: https://nx.dev/packages/nx/documents/migrate
For Angular Cli: https://angular.io/cli/update

Enjoy 😊