Upgrade your Application to v15 🚀
Tags: javascript, angular, typescript, webdev
Published: 2023-01-24 16:27:51

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](https://angular.io/cli/update).

## Why Upgrade to Angular 15
[Angular 15](https://angular.io/guide/update-to-version-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:

![moving from v7 to v9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u54uxltos3umo82uxgj.png)

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:

![list of the things](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02tfz3qm0ox6e9zmoaj9.png)

![list of the things 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/582aqk1ae1jy0reqnxo1.png)

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](https://update.angular.io/?v=7.0-8.0)
- [v8 to v9](https://update.angular.io/?v=8.0-9.0)
- [v9 to v10](https://update.angular.io/?v=9.0-10.0)
- [v10 to v11](https://update.angular.io/?v=10.0-11.0)
- [v11 to v12](https://update.angular.io/?v=11.0-12.0)
- [v12 to v13](https://update.angular.io/?v=12.0-13.0)
- [v13 to v14](https://update.angular.io/?v=13.0-14.0)
- [v14 to v15](https://update.angular.io/?v=14.0-15.0)

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


Enjoy 😊