How to upgrade angular version

How to upgrade Angular version to latest release (version 10)

Angular is infamous for frequent version releases. Angular team try to deliver at least two major versions in a year.

You can find Angular release schedule here:

Angular

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…

In general, you can expect the following release cycle:

A major release every 6 months

1–3 minor releases for each major release

A patch release and pre-release ( next or rc ) build almost every week

If you are a web developer working with Angular since its version 2, then you must have suffered from the pain of version upgrade. Thanks to Angular team, the version upgrade is smooth now (or is it?) if you keep upgrading your Angular project on regular basis. In this story, I will share few important links, and tips how to keep project up-to-date.

Upgrade Angular CLI globally

First, check your current Angular CLI version by running command. Note that if you run this command inside Angular project directory then you will get Angular project’s version. If you run it outside Angular version then you will get global Angular CLI version.

The Angular CLI is installed on global level as well as on project level. If you upgrade Angular CLI version inside Angular project then it shall update only project’s Angular CLI version. The global Angular CLI version can be upgraded by removing previous version and installing newer one.

Once Angular CLI has been upgraded globally, you can create new Angular project by running command:

Upgrade Angular version using command

The Angular CLI can upgrade your older project’s Angular version to latest by running command:

Make sure the project folder as node_modules folder otherwise this command will throw an error. You can read more about ng update command at Angular official website.

Angular

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…

Upgrade Angular version semi-automatically

The ng update command is not a silver bullet. The complex Angular project might have many 3rd party libraries, packages installed which couldn’t be upgraded safely to newer version. In such scenario, upgrading to newer version needs extra efforts.

The Angular update website provides a simple web interface where you can select your project attributes like from which Angular version to target Angular version, project complexity etc. The website then, shall provide step by step guide how to update your project for newer version.

Angular Update Guide

Edit description

Angular official websites provides Release Information for each new release with steps to migrate. You can find steps for upgrading to version 10 at below website:

Angular

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…

Experimental releases

You can keep an eye on upcoming Angular version and feature with next version tag.

Angular

Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…

You can also set flag next in Angular CLI update command while version upgrade.

Stay informed

You can keep eye on Angular twitter handle and Medium blog.

Read writing about Release Notes in Angular Blog. The latest news and tips from the Angular team.

When should I upgrade?

In corporate world, not every team has liberty to keep upgrading their project version to latest Angular version. First, it costs money! You have to put a task in your backlog/sprint for upgrade. Second, it’s hard to convince management, why would you like to keep it up-to-date when everything seems to work with current version? I have seen teams who keeps their project up-to-date to each major release, whereas some choose to go for upgrade after each alternate major release (e.g. from version 7 to 9 skipping version 8). Some teams choose to upgrade only if the new release has some breaking changes with respect to their project features. They are not interested in new features but want to make sure that existing features and functionalities won’t be affected by new version.

Ideally if you keep upgrading your Angular version for each major release then you will enjoy smooth transition as compared to staggered release upgrade.

How To Update Angular CLI To Latest Version

Update Angular CLI version

Updating Angular CLI to the latest version is pretty much simple if you are using Angular 9 or 10 version above.

Just update @angular/core and @angular/cli by using ng update command.

or you can use npx command

If you are using Angular material You have to update it as well using ng update command.

The Angular latest Official stable version is Angular v14 which is released on 2nd June 2022.

The Angular latest Official stable version is Angular v13.2.5, which is released on 2nd March 2022.

Remember below important things, before updating your Angular applications.

Table of Contents

Important things to remember while updating Angular applications.

Angular CLI version check

To update Angular CLI to a new version, It’s better to update both the global Angular CLI installed in your machine as well as your project’s local Angular CLI.

Update Angular CLI version Globally

Steps To update Angular CLI version globally in your system.

If you are using MAC or linux systems you might need to add the prefix sudo before npm

Your global Angular CLI version is greater than your local version.The local Angular CLI version is used

After updating Angular CLI globally you might get this warning if your local project’s angular cli version less than the global angular cli version.

As local packages have more priority than global packages you will get Your global Angular CLI version is greater than your local version.The local Angular CLI version is used warning.

So mostly you need to update your local Angular CLI version as well

Update Angular CLI version Locally

To update Angular CLI version in your local projects use the following commands.

Navigate to your local Angular project folder and execute the below commands.

Steps to upgrade Angular application are same across the operating systems like Windows OS,MacOS and Linux OS or Unix based machines.

If you are using older versions of Angular like 5 or 6 or 7. You need to follow some additional steps as shown below.

First update to Angular CLI 6 version and then Angular CLI 7 ==> Angular CLI 8 and finally Angular CLI 9 version.

Update Angular CLI version to 6

If you are migrating from older versions of Angular CLI like 1.x to Angular 6 version.

You need to do few additional checks apart from the above commands.

First you need to convert “angular-cli.json” file in older Angular CLI version to the latest “angular.json” file used in version 6.

To convert “angular-cli.json” file, use the following command

The migrate only flag makes sure that it will do only a migration but does not update the Angular CLI.

And if you use RxJs, you need to update it as well use the below command

It will update the RxJs version to 6.

To support older RxJs imports the above command automatically installs the rxjs-compat package.

If you get any error try manual installation.

You can remove the below lines from polyfills.ts

And additionally you need to update the @angular core modules as well

ng update @angular/core

Update Angular CLI version to 7

Once you upgraded to Angular CLI version 6.

Its very easy to update it to the current latest Angular CLI version 7.

To update Angular CLI version to 7. Just run the following commands

ng update @angular/cli @angular/core

The above command updates Angular cli as well as angular core packages.

In addition to that you can refactor the TypeScript code so that it does not depend on rxjs-compat modules(as explained above).

To refactor TypeScript code run following command

Once all of your dependencies have updated to latest RxJS 6, remove rxjs-compat package as it increases bundle size.

npm uninstall rxjs-compat

Update Angular CLI version to 7

To update the Angular CLI to latest version 9 follow the below steps.

First update the local angular cli to version 8.3.17 or 8.x version by using below command.

After updating angular cli to version 8 and above, use the below command to update angular cli to version 9

updating angular cli to version 9

As there are some breaking changes are coming in Angular 9

The above commands will run a series of small migrations that will convert the code of your application to be compatible with version 9 as shown below.

migrating the project to Angular 9

Update Angular CLI version to 10

I updated a sample Angular application to Angular CLI 10 (Which is in version Angular CLI 9).

Updating to Angular 10 is pretty much simple.

You can see the version update log below.

Angular 10 Update Log

Follow the official Angular update recommendations.

The Angular team released an official Angular update guide.

Go to the website and select your Angular version and the version you wanted to update, it will show the series of recommendations.

ng update @angular/cli not working

If you follow the above steps carefully mostly Angular cli version will be updated without any problems. And do not forgot to add @latest suffix.

ng update @angular/cli@latest

Major breaking changes in Angular 10 version

Angular 10 recommends the use of a tsconfig.base.json to help organize the various typings contexts (shared, unit tests, end to end tests, application, etc). ng update will migrate your project automatically.

Angular 10 update

Angular version 10.1.2

After releasing Angular 10 version, Angular team at google releasing small minor versions of Angular which fixes few existing bugs and minor features.

As part of this on 16th September 2020, Angular version 10.1.2 released.

I will be listing down the bug fixes and features of this current release.

Bug Fixes

Performance Improvements

Improvements in @angular/compiler-cli package

The information related to above two improments can be found in below link #38843

Improvements in @angular/ngcc package

The information related to above two improments can be found in below link #38840

Angular version 9.0.0-rc.10 released

On January 22, 2020 Angular version 9.0.0.-rc.10 is released.

To update angular version to 9.0.0-rc.10 use the below command

You can see following message in command prompt

angular-cli-version-9-0-0-rc10

Make sure you update the angular project to version 9 as explained above, before upgrading to Angular version 9.0.0-rc.10.

As it’s pointing out we need to upgrade @angular/cli and @angular/core to 9.0.0-rc.10 version.

Use the below command to update them as well

Angular 9 Released

On february 7 2020 The Angular 9 version released.

To update to angular 9 version use the below command.

If everything is ok then you can see following message in console

As the final version angular 9 is released. It is not required to use –next flag.

Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Angular 8 Upgrade: Using Ng-Update & Angular CLI v8

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

In this tutorial, you’ll learn about the required steps that you need to follow to appropriately migrate your existing apps to Angular 8 — The latest version of the framework as of this writing.

Angular 8 is Released!

Angular 8 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.4+ and Node 12+. Let’s see how we can update the CLI to v8 and upgrade an existing project from using version 7 to Angular 8.

What is the ng update Command?

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:

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 installAngular 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:

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:

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:

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:

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 changerelated to static query migrations:

This was unavoidable but the CLI will notify you when you are upgrading to Angular 8. The notification says that With Angular version 8, developers need to explicitly specify the timing of ViewChild and ContentChild queries.

During the update, if Angular CLI fails to automatically to figure out whether to use the static or dynamic flag in the query, it will warn you and you need to go and manually apply the correct timing in your code. The shematic will also add a comment saying /* TODO: add static flag */ in your code.

According to the docs:

If you see this comment, it means that the schematic couldn’t statically figure out the correct flag. In this case, you’ll have to add the correct flag based on your application’s behavior. For example:

In the template you need to have a DOM element identified with foo :

Now, how you can choose the correct flag to use, again according to the docs.

Most applications will want to use for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside *ngIfs or *ngFors) will be found by the query.

There are rarer cases where flag might be necessary (see answer here ).

What About Angular Material v8

If your project makes use of Angular Material you also need to upgrade the package to v8 using the following command:

This command will update the package and automatically change the imports statements of your Angular Material components to the specific component paths instead of directly importing from the @angular/material entry-point which is now deprecated.

Importing directly from the root @angular/material entry-point is deprecated. You should instead import from specific entry-points, e.g. @angular/material/button. This aligns with @angular/cdk, makes clear where symbols originate, and helps safeguard against including unused code. The deprecated style will be removed in Angular v9.

Angular CLI users can use ng update @angular/material to automatically migrate imports to the new style.

Other Deprecations

You can also head to the deprecation guide on the official website. If you still have issues, you can open an issue in the GitHub repository of Angular CLI or the repository of Angular if it’s related to the framework.

You can also check out update.angular.io for more details.

How to Upgrade to Angular 7

You can find more details about the update process from the update.angular.io official website.

Thanks to all the improvements done in Angular 6, it’s now easier than ever to update to the latest version.

In most cases, you can update to v7 by running one simple command:

If you still need more details on the process, follow the next sections:

Updating from Angular 6 to Angular 7 (Basic Apps)

if your project is basic, you can simply try the following steps:

Updating Advanced Apps

If your project uses advanced APIs like HTTP, you need to replace the old HttpModule and the Http service (which was deprecated in v6) with the new HttpClientModule and the HttpClient service that brings a lot of new powerful features.

Also if your applicaton makes use of the Angular Service worker, you need to migrate any versionedFiles to the files array.

Aside from what’s stated above, you don’t need to perform any changes in your project to migrate from v6.1 to v7.

Instructions for Old Angular Versions

Throughout this tutorial guide, you’ll learn by example how you can update or migrate your Angular 5project generated by Angular CLI to use Angular 6 (The latest version) and Angular CLI 6. We’ll take you step by step to upgrade your existing Angular 5 projects (can be also applied to Angular 2or Angular 4) to use the latest Angular features and dependencies.

In nutshell, these are the steps:

Requirements

Before you can update/upgrade your Angular 5 project, make sure you have the following requirements:

Installing or Updating the Angular CLI to Version 6

Updating the Angular CLI is easy and it’s a matter of installing the latest version from npm using the following command:

You may need to add sudo depending on your npm configuration.

Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.

Updating Angular 5 CLI to Version 6 (Method 2)

You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:

Next run the npm install command globally:

Upgrading Angular 4|5 Projects

First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project’s root folder):

Updating Configuration Files

There are many differences between Angular 4|5 and Angular 6 such as

You can update different configuration files automatically by running the following command from the project’s root folder:

Discovering Packages to Update

Angular CLI has a new utility that allows you to automatcially analyze your project’s package.json file and displays dependencies that need to be updated.

Using you terminal from the root folder of your Angular 5 project run the following command:

This is an example output from this command:

Upgrading Core Packages to Angular 6

Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:

Upgrading RxJS

You can update RxJS using the ng update command:

Upgrading Angular 2 Projects

Now how about existing Angular 2 projects, generated using the Angular CLI?

You can easily update them to use latest dependencies by following these instructions:

First check your versions of installed Angular CLI and other dependencies with:

In my case, I’m getting this output:

Since we have installed the latest Angular CLI globally. If you try to serve your project you’ll be getting a warning of version mismatch:

Next open your project package.json file then change the Angular CLI version: You can check the npm info page for Angular CLI package from this link to find out the latest version.

Next, delete your project node_modules folder and run the following command:

You don’t need to change the versions of the other dependencies, the Angular CLI will take care of fetching latest versions.

Now you can check again for installed versions with:

In my case I’m getting this output:

As you can see Angular 4.3.1 is installed.

Conclusion

In this tutorial, we’ve seen step by step how to ng update the Angular CLI to version 6, how to upgrade an existing Angular 2 to Angular 4 and An Angular 4|5 to Angular 6.

This tutorial is also updated for Angular 7.

How to Update Angular Projects to the Latest Version

In this article, we’ll look at how to update Angular projects to the latest version.

This article is part 6 of the SitePoint Angular 2+ Tutorial on how to create a CRUD App with the Angular CLI.

In part 1 we learned how to get our Todo application up and running and deploy it to GitHub pages. This worked just fine but, unfortunately, the whole app was crammed into a single component.

In part 2 we examined a more modular component architecture and learned how to break this single component into a structured tree of smaller components that are easier to understand, reuse and maintain.

In part 3 we updated our application to communicate with a REST API backend using RxJS and Angular’s HTTP service.

In part 4, we introduced Angular Router and learned how the router updates our application when the browser URL changes and how we can use the router to resolve data from our backend API.

In part 5, we added authentication to our application and learned how we can protect sections from our application from unauthorized access.

Don’t worry! You don’t need to have followed part 1, 2, 3, 4 or 5 of this tutorial for 6 to make sense. You can simply grab a copy of our repo, check out the code from part 5, and use that as a starting point. This is explained in more detail below.

Up and Running

To start on our goal to update Angular, make sure you have the latest version of the Angular CLI installed. If you don’t, you can install it with the following command:

If you need to remove a previous version of the Angular CLI, you can:

After that, you’ll need a copy of the code from part 5. This is available on GitHub. Each article in this series has a corresponding tag in the repository so you can switch back and forth between the different states of the application.

The code that we ended with in part 5 and that we start with in this article is tagged as part-5. The code that we end this article with is tagged as part-6.

So, to get up and running (with the latest version of the Angular CLI installed) we would do this:

Then visit http://localhost:4200/. If all’s well, you should see the working Todo app.

Update Angular: Our Plan of Attack

In this article, as we update Angular, we’ll learn the following:

By the end of this article, you’ll understand:

Let’s get started!

The Meaning of Angular Versions

To support a thriving ecosystem, Angular needs to be both stable and evolutionary.

On one hand, Angular aims to provide developers with maximum stability for mission-critical applications. On the other hand, it constantly needs to adapt and advance to support the latest changes in web technologies.

Therefore, the Angular team has decided to use a time-based release cycle with semantic versioning.

A time-based release cycle means that we can expect new versions of Angular (Angular 5, Angular 6, Angular 7, etc.) every couple of weeks or months.

Semantic versioning means that the version number of Angular allows us to predict whether or not it will break our application if we upgrade to it.

So version v1.3.8 has a major component with a value of 1, a minor component with a value of 3 and a patch component with a value of 1.

When a new version is released, the new version implicitly indicates the type of change that was made to the code.

The following rules are applied when a semantic version is increased:

Each increment happens numerically with an increment of 1.

When a bug is fixed and the code stays backwards compatible, the patch component is increased:

When functionality is added and the code stays backwards compatible, the minor component is increased and the patch component is reset to zero:

When a change is implemented that causes the code to become backwards incompatible, also known as a breaking change, the major component is increased and the minor and patch components are reset to zero:

If you’re not familiar with semantic versioning, make sure to check out this simple guide to semantic versioning.

The Angular team combines semantic versioning with a time-based release cycle to aim at:

The release schedule is not set in stone, as there may be holidays or special events, but it’s a good indicator of what we can expect in terms of upcoming versions.

You can follow the official Angular blog and the official change log to stay up to date on the latest developments.

A huge benefit of semantic versions is that we can safely update Angular applications with patch or minor releases without having to worry about breaking our applications.

But what if there’s a new major release?

The Angular Update Guide

We already learned that a major release can come with breaking changes. So how do we know if our existing application will break or not if we update it?

One way would be to read the official change log and go through the list of changes.

A much easier way is to use the Angular Update Guide to update Angular. You select your current version of Angular and the version you wish to upgrade to and the application tells you the exact steps you need to take:

For our Angular Todo application, we wish to upgrade from Angular 4.0 to Angular 5.0.

Let’s select app complexity level Advanced so we see all the possible measures we need to take:

We get a complete overview of all the steps we need to take to update our application.

How sweet is that!

Before Updating

The Before Updating list contains 12 items. None of the items apply to our Angular Todo application, so we can safely proceed to the next step.

During the Update

From the During the Update list, only the last item applies to our application. We need to update our dependencies, so let’s run the proposed commands in the root of our project:

Because we updated our Angular CLI to the latest version in the Up and Running section, we also update our local version:

To verify that our application runs correctly, we run:

If ng serve fails to start, try deleting your node_modules directory and package-lock.json file and run npm install to recreate a clean node_modules directory and package-lock.json file.

After the Update

The After the Update list contains four items, of which the first and the last apply to our application:

Let’s tackle them one by one.

Switching from HttpModule to HttpClientModule

If we inspect the Angular version 5.0.0 release notes, we learn that Angular 4.3 and later ships with a new HttpClient that automatically handles JSON responses and supports HTTP Interceptors.

Let’s open src/app/app.module.ts and replace HttpModule :

Next, we must use the HttpClient service instead of the Http service and remove all map(res => res.json()) calls in our code because the new HttpClient automatically parses the responses for us.

As a result, we only have to update one file, so let’s open up src/app/api.service.ts and replace:

More specifically, we replace:

Time to tackle item 2: import RxJS operators from rxjs/operators and use the RxJS pipe operator.

Using the RxJS Pipe Operator

Angular 5 was updated to use RxJS 5.5.2 or later.

A pipeable operator is any function that returns a function with the signature: (source: Observable ) => Observable …

You pull in any operator you need from one spot, under rxjs/operators (plural!). It’s also recommended to pull in the Observable creation methods you need directly as shown below with range:

Although this sounds complicated, it essentially means that where we previously used chained methods:

The main benefits of pipeable operators are:

First, let’s open up src/app/api.service.ts to update our ApiService :

Next, let’s open up src/app/todos/todos.component.ts to apply the same changes to TodosComponent :

That’s it! The chained operators in our application have been replaced by pipeable operators, just as the Angular Update Guide instructed us to.

To verify that we are really running Angular 5, we can open up the element inspector:

Mission accomplished! Our application has been successfully upgraded to Angular 5.2.9.

We covered quite a lot, so let’s recap what we’ve learned.

Summary

In the first article, we learned how to:

In the second article, we refactored AppComponent to delegate most of its work to:

In the third article, we learned how to:

In the fifth article, we learned:

In this article on how to update Angular, we learned:

In upcoming versions, Angular CLI will introduce the ng update command to help update Angular applications. As soon as more details are available, we’ll provide you with a follow-up article on how this new command can make our lives even easier.

Until then, you can use this article as a guide on how to update Angular applications to the latest version.

All code from this article is available on GitHub.

Upgrade to Angular 14

Updating Angular CLI to v14 and upgrading your project to Angular 14 framework from previous versions (Angular 13) is easier than ever before, thanks to all the work that has been done in version 14 and the ng update command which allows you to update specific versions and dependencies.

How to Update to Angular 14 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 14 — The latest version of the framework at the time of this writing.

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

You can read about the migrate command here.

You gotta give props to @nrwl_io for making updating Angular apps a breeze.

Started updating my @angular with ng update, before I realized that there is a better way with nx migrate.

👓 Final touches
🧐 breaking change
🧨 Deprecation

Give this RC a spin, It might be your last change to report a #angular bug before release! pic.twitter.com/zuvjf2xzso

Angular 14 release

Angular 14 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 4.7+ and Node 14+. Let’s see how we can update the CLI to v14 and upgrade an existing project from using version 13 to Angular 14.

What is the ng update Command?

Updating Angular to v14

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

Why Upgrade to Angular 14

Why upgrading to Angular 14?

Angular 14 comes with new features that makes it the greatest release so far that 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 reduces security issues.

Upgrading from Angular 13 to v14

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

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.

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:

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

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

You’ll get the following output:

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.

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.

Make sure you are using Node 10 or later.

In you command-line interface run the following command:

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

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:

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

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:

This is the output of the command:

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.

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:

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

And this is the output:

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

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

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

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

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:

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:

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.

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:

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:

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:

This was unavoidable but the CLI will notify you when you are upgrading to Angular 8. The notification says that With Angular version 8, developers need to explicitly specify the timing of ViewChild and ContentChild queries.

During the update, if Angular CLI fails to automatically to figure out whether to use the static or dynamic flag in the query, it will warn you and you need to go and manually apply the correct timing in your code. The shematic will also add a comment saying /* TODO: add static flag */ in your code.

According to the docs:

If you see this comment, it means that the schematic couldn’t statically figure out the correct flag. In this case, you’ll have to add the correct flag based on your application’s behavior. For example:

In the template you need to have a DOM element identified with foo :

Now, how you can choose the correct flag to use, again according to the docs.

Most applications will want to use for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside *ngIfs or *ngFors) will be found by the query.

There are rarer cases where flag might be necessary (see answer here).

What About Angular Material v8

If your project makes use of Angular Material you also need to upgrade the package to v8 using the following command:

This command will update the package and automatically change the imports statements of your Angular Material components to the specific component paths instead of directly importing from the @angular/material entry-point which is now deprecated.

Importing directly from the root @angular/material entry-point is deprecated. You should instead import from specific entry-points, e.g. @angular/material/button. This aligns with @angular/cdk, makes clear where symbols originate, and helps safeguard against including unused code. The deprecated style will be removed in Angular v9.

Angular CLI users can use ng update @angular/material to automatically migrate imports to the new style.

Other Deprecations

You can also head to the deprecation guide on the official website. If you still have issues, you can open an issue in the GitHub repository of Angular CLI or the repository of Angular if it’s related to the framework.

You can also check out update.angular.io for more details.

How to Upgrade to Angular 7

You can find more details about the update process from the update.angular.io official website.

Thanks to all the improvements done in Angular 6, it’s now easier than ever to update to the latest version.

In most cases, you can update to v7 by running one simple command:

If you still need more details on the process, follow the next sections:

Updating from Angular 6 to Angular 7 (Basic Apps)

if your project is basic, you can simply try the following steps:

Updating Advanced Apps

If your project uses advanced APIs like HTTP, you need to replace the old HttpModule and the Http service (which was deprecated in v6) with the new HttpClientModule and the HttpClient service that brings a lot of new powerful features.

Also if your applicaton makes use of the Angular Service worker, you need to migrate any versionedFiles to the files array.

Aside from what’s stated above, you don’t need to perform any changes in your project to migrate from v6.1 to v7.

Instructions for Old Angular Versions

Throughout this tutorial guide, you’ll learn by example how you can update or migrate your Angular 5 project generated by Angular CLI to use Angular 6 (The latest version) and Angular CLI 6. We’ll take you step by step to upgrade your existing Angular 5 projects (can be also applied to Angular 2 or Angular 4) to use the latest Angular features and dependencies.

In nutshell, these are the steps:

Requirements

Before you can update/upgrade your Angular 5 project, make sure you have the following requirements:

Installing or Updating the Angular CLI to Version 6

Updating the Angular CLI is easy and it’s a matter of installing the latest version from npm using the following command:

You may need to add sudo depending on your npm configuration.

Also it goes without saying that you need Node.js 8+ and NPM installed on your system to be able to install and run Angular CLI 6.

Updating Angular 5 CLI to Version 6 (Method 2)

You can also uninstall the previous Angular CLI 5 version before you install the latest version using the following command:

Next run the npm install command globally:

Upgrading Angular 4|5 Projects

First, start by installing the Angular CLI 6 locally using the following command (Make sure you are inside your project’s root folder):

Updating Configuration Files

There are many differences between Angular 4|5 and Angular 6 such as

You can update different configuration files automatically by running the following command from the project’s root folder:

Discovering Packages to Update

Angular CLI has a new utility that allows you to automatcially analyze your project’s package.json file and displays dependencies that need to be updated.

Using you terminal from the root folder of your Angular 5 project run the following command:

This is an example output from this command:

Upgrading Core Packages to Angular 6

Now you need to update the core packages/dependencies to Angular 6. Simply run the following command:

Upgrading RxJS

You can update RxJS using the ng update command:

Upgrading Angular 2 Projects

Now how about existing Angular 2 projects, generated using the Angular CLI?

You can easily update them to use latest dependencies by following these instructions:

First check your versions of installed Angular CLI and other dependencies with:

In my case, I’m getting this output:

Since we have installed the latest Angular CLI globally. If you try to serve your project you’ll be getting a warning of version mismatch:

Next open your project package.json file then change the Angular CLI version: You can check the npm info page for Angular CLI package from this link to find out the latest version.

Next, delete your project node_modules folder and run the following command:

You don’t need to change the versions of the other dependencies, the Angular CLI will take care of fetching latest versions.

Now you can check again for installed versions with:

In my case I’m getting this output:

As you can see Angular 4.3.1 is installed.

Conclusion

In this tutorial, we’ve seen step by step how to ng update the Angular CLI to version 6, how to upgrade an existing Angular 2 to Angular 4 and An Angular 4|5 to Angular 6.

This tutorial is also updated for Angular 7.

Date: 06 Jun 2022

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Hands-on Angular eBook

Subscribe to our Angular newsletter and get our hands-on Angular book for free!