Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9

Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9

In this post we will give you information about Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9. Hear we will give you detail about Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9And how to use it also give you demo for it if it is necessary.

Updating Angular CLI to v9 and upgrading your project to Angular 9 from v8/7 is now easier than ever before, thanks to all the work that has been done in version 9 and the ng update command which allows you to update specific versions and dependencies.

See also: How to Check Installed Angular CLI Version & Update to Latest Angular 9 Version Globally

How to Update to Angular 9 by Example?

In this tutorial, you’ll learn about the required steps that you need to follow to appropriately migrate your existing apps to Angular 9 โ€” The latest version of the framework at the time of this writing.

Also check out Angular 10 Update Guide with Examples

Angular 9 is Released!

Angular 9 is released with many new features for the core framework and the other libraries like Angular Material. The new version depends on the latest version of TypeScript 3.6+ and Node 12+. Let’s see how we can update the CLI to v9 and upgrade an existing project from using version 7/8 to Angular 9.

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.

Updating Angular to v9

In this tutorial, we’ll see step by step how to upgrade an example Angular 7 project to the latest Angular 9 version.

  • Step 1 – Cloning the Project from GitHub
  • Step 2 – Identifying the Used Angular Version in The Project
  • Step 3 – Identifying how To Upgrade
  • Step 4 – Updating from Angular 7 to v8
  • Step 5 – Updating from Angular v8.2.3 to The Latest Angular 9 Pre-Release Version
  • Step 6 – Serving the App

Why Upgrade to Angular 9

Why upgrading to Angular 9?

Angular comes with the Ivy renderer by default which provides increased performance and smaller bundles but also many new features that you can check from here.

Also updating your project to the latest version provides bug fixes and less security issues.

Steps for Upgrading from Angular 7 to Angular 9

We have previously started a tutorial series for building a portfolio web application with Angular 7 and Firebase. Before we continue building our app, let’s upgrade it to Angular 9.

Step 1 – Cloning the Project from GitHub

Let’s start with the first step in which we’ll clone the Angular 7 project from the GitHub repository.

Open a new command-line interface and run the following command:

$ git clone 

Next, navigate to your project’s folder and install the project’s dependencies using the following commands:

$ cd angular-portfolio$ npm install

Step 2 – Identifying the Used Angular Version in The Project

Head back to your command-line interface and run the following command:

$ ng version

You’ll get the following output:

Your global Angular CLI version (9.0.0-rc.2) is greater than your localversion (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.4Node: 10.16.3OS: win32 ia32Angular: 7.1.4... animations, cli, common, compiler, compiler-cli, core, forms... language-service, platform-browser, platform-browser-dynamic... routerPackage                           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.4rxjs                              6.3.3typescript                        3.1.6webpack                           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 3 – 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.

Head to that interactive guide and specify 7.1.4 as the current version and the target version which is v9.0.0-rc.2 and click the Show me how to update! button

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:

Note: The tool indicates that if we are using the legacy HttpModule and the Http service in our project, we need to switch to HttpClientModule and the HttpClient service but we are not making use of Http in this project.

Step 4 – Updating from Angular 7 to v8

Angular 8 uses TypeScript 3.4, read more about errors that might arise from improved type checking.

Make sure you are using Node 10 or later.

In you command-line interface run the following command:

$ ng update

This will analyze the package.json file of your project and give you a list of packages to update with the required commands:

    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

This will update the core framework and CLI to Angular 8:

    Updating package.json with dependency @angular/compiler @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/language-service @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/forms @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/platform-browser @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/cli @ "8.3.19"(was "7.1.4")...    Updating package.json with dependency @angular/animations @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/common @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency zone.js @ "0.9.1"(was "0.8.26")...    Updating package.json with dependency rxjs @ "6.5.3"(was "6.3.3")...    Updating package.json with dependency @angular/router @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/core @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency @angular/compiler-cli @ "8.2.14"(was "7.1.4")...    Updating package.json with dependency typescript @ "3.5.3"(was "3.1.6")...

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

This is the output of the command:

Angular CLI: 8.3.19Node: 10.16.3OS: win32 ia32Angular: 8.2.14... animations, common, compiler, compiler-cli, core, forms... language-service, platform-browser, platform-browser-dynamic... routerPackage                           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.19rxjs                              6.5.3typescript                        3.5.3webpack                           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.

Step 5 – 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

And this is the output:

...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

Our project is successfully updated to Angular 9. This is the output of the command:

Using package manager: 'npm'Collecting installed dependencies...Found 32 dependencies.Fetching dependency metadata from registry...    Updating package.json with dependency @angular/cli @ "9.0.0-rc.2"(was "8.3.19")...    Updating package.json with dependency @angular/core @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular-devkit/build-angular @ "0.900.0-rc.2"(was "0.11.4")...    Updating package.json with dependency @angular/compiler-cli @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/animations @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/language-service @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency tslib @ "1.10.0"(was "1.9.3")...    Updating package.json with dependency @angular/forms @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/platform-browser @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/platform-browser-dynamic @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/common @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency zone.js @ "0.10.2"(was "0.9.1")...    Updating package.json with dependency @angular/router @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency @angular/compiler @ "9.0.0-rc.2"(was "8.2.14")...    Updating package.json with dependency typescript @ "3.6.4"(was "3.5.3")...UPDATE package.json (1400 bytes)โˆš Packages installed successfully.** Executing migrations of package '@angular/cli'**> Angular Workspace migration.  Update an Angular CLI workspace to version 9.UPDATE angular.json (4186 bytes)UPDATE tsconfig.json (457 bytes)UPDATE src/tsconfig.app.json (170 bytes)UPDATE src/tsconfig.spec.json (274 bytes)UPDATE package.json (1403 bytes)โˆš Packages installed successfully.  Migration completed.> Lazy loading syntax migration.  Update lazy loading syntax to use dynamic imports.  Migration completed.** Executing migrations of package '@angular/core'**> Static flag migration.  Removes the 'static' flag from dynamic queries.  As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries.  Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag  Migration completed.> Missing @Injectable migration.  In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter.  Read more about this here: https://v9.angular.io/guide/migration-injectable  Migration completed.> ModuleWithProviders migration.  In Angular 9, the ModuleWithProviders type without a generic has been deprecated.  This migration adds the generic where it is missing.  Read more about this here: https://v9.angular.io/guide/migration-module-with-providers  Migration completed.> Renderer to Renderer2 migration.  As of Angular 9, the Renderer class is no longer available.  Renderer2 should be used instead.  Read more about this here: https://v9.angular.io/guide/migration-renderer  Migration completed.> Undecorated classes with decorated fields migration.  As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not havean Angular decorator.  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes  Migration completed.> Undecorated classes with DI migration.  As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator.  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes  Migration completed.Your project has been updated to Angular version 9!For more info, please see: https://v9.angular.io/guide/updating-to-version-9

Step 6 – Serving the App

You can see if your application still works by simply serving it:

$ ng serve

In this section, we’ve seen step by step how to update our old Angular 7 project to Angular 8 and finally to Angular 9.

Updating Angular CLI to v8

Updating Angular CLI can be made by simply installing the latest version from npm using the following command in your terminal:

$ npm install -g @angular/cli 

Make sure you have the latest version of Node (12+) and npm installed in your system. You can refer to the official website to download a version compatible with your operating system.

You might need to add sudo before your command in debian based systems and macOS in order to install Angular CLI globally in your system or run your command prompt as administrator in Windows. If you get any EACCESS permission errors, you can also just fix your npm permissions or use NVM (Node Version Manager) to install your Node version which takes care of automatically resolving these issues.

How to Upgrade to Angular 8?

For simple use cases and thanks to the work done in Angular 8, you can upgrade to the latest release using one command:

$ ng update @angular/cli @angular/core

After running this command, the lazy loaded routes will be automatically migrated to the new import syntax which is standard compliant and brings Angular close to the open web platform.

You also need to be aware of the following issues when upgrading your project:

  • Angular 8 makes use of the latest TypeScript 3.4, so even if the upgrade process completes with success you might have some syntax errors that may be due to the better type inference system used by the latest version which detects new potential typing issues but in the end this will improve your code quality and helps you avoid bugs in the future. You can see the new features of TypeScript 3.4 from the official docs.

  • You need to have Node.js 12+. Simply run node -v to verify your Node version. You can install the latest version from the official website.

The New Import Syntax of Lazy Loaded Routes

If you have worked with lazy loaded routes in Angular then you have certainly used code similar to the following:

constroutes:Routes=[{path:'product-list',loadChildren:'./product-list/product-list.module#ProductListModule',}];

We have a route with a product-list path which makes use of the loadChildren property to lazy-load the product list module. We use a magic string which refers to the module and which is used by Angular CLI to apply code splitting and load the chunck at runtime. If you put a wrong path in this magic string, Angular will not detect the issue right away.

Now with Angular 8, there is a better alternative which is using the standard compliant import() statement which will allow you to detect any issues ahead of time:

constroutes:Routes=[{path:'product-list',loadChildren:()=>import('./product-list/product-list.module').then(m=>m.ProductListModule)}];

Don’t worry about making the changes manually since when updating via the Angular CLI, it will automatically replace your existing loadChildren with the new import() syntax.

Breaking Changes in @ViewChild and @ContentChild

If you are using @ViewChild and @ContentChild in your code, you need to be aware of a breaking change related to static query migrations:

๐Ÿ“ฃ@angular released v 8.0.0-rc.5 ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ ๐Ÿ‘“ Final touches ๐Ÿง breaking change ๐Ÿงจ DeprecationGive this RC a spin, It might be your last change to report a #angular bug before release! pic.twitter.com/zuvjf2xzso

โ€” Sander Elias @๐Ÿ‡ณ๐Ÿ‡ฑ (@esosanderelias) May 24, 2019

Hope this code and post will helped you for implement Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US