How to Upgrade from Angular 9 to Angular 10?

Angular is known for frequent Version release and the Team usually deliver at least two major versions in a Year.

It's good to let you know that Angular 10 is out with many new features. To learn more about the new Angular 10 click here.

Looking for Angular Templates?

• Try some popular Angular Dashboard Templates from AdminMart and WrapPixel and create stunning web applications for unlimited client projects and personal projects.
• Start building web applications and products using our Free Angular Templates without any investment.

Updating your Angular CLI app to Angular 10 is quite easier than ever expected thanks to all the work that has been done in version 10 and the ng update command which allows you to update specific versions and dependencies.

In this article, we will learn all the steps needed to migrate your existing Angular 9 to Angular 10(Which is the latest version of the framework at the time of this writing).

To follow this short guide, your existing project must be on version 9. x.x at this moment. We use the 10.0.0 tag to upgrade our dependencies.

The first step in doing this by Upgrading the Angular CLI Globally.

Before doing this confirm that your CLI is running on Angular 9 by running:

ng version

Running this command can be a little tricky. Running it in an angular project directory will output the version of that angular project, but running it outside the angular project director will give the current version of the Angular CLI globally installed on your local machine.

This means that Angular can be installed on two levels, i.e. project Level and the global level.

Our Major concern is upgrading the global CLI to Angular 10. To do this we have to first of all uninstall the previously installed Angular CLI and install a new one to avoid errors. To do that run this:

npm uninstall -g angular-cli
npm install -g @angular/cli@latest

Pro tips: It is always a good idea to run the npm cache clean–force after uninstalling an npm package. This will help install the package directly from NPM and not from your local machine cache.

This -g flag in the commands will uninstall the Angular CLI and install the latest version globally.

After running this command, run the ng version command again and you will see that your Angular CLI has been globally updated:

With this installed, running the ng new <project name> will scaffold a new Angular 10 project.

Updating Angular 9 Project to Angular 10

The Angular CLI is also capable of upgrading your Angular 9 project to Angular 10 using the ng update command.

There are certain things you have to consider before updating:

1. You can speed up your build if your Angular Application depends on some Angular libraries by invoking the Angular Compatibility Compiler ngcc in an npm post-install script by adding this to the script section in your package.json file:

"scripts": {
    ... other scripts
    "postinstall": "ngcc"
  }

All you have to do is move into the project directory and run:

ng update @angular/cli @angular/core

2. Angular 9 introduced a global $localize() function that needs to be loaded if you depend on Angular’s internationalization (i18n). Run ng add @angular/localize to add the necessary packages and code modifications.

When running the ng update command make sure that the node_modules directory is on your application else this will throw an error. Nodejs stores all its dependencies inside the node_modules folder, so running this command will update the projects Angular Core and Angular CLI.

Experimental Releases

Angular gives us the ability to keep track of all upcoming Angular versions and features using the –next flag.

All you have to do is run:

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

You can also set the flag next in the Angular CLI update command while version upgrade. Please write in the comments if you do have any queries.