How to Update the Latest Angular CLI Version

To update Angular CLI to the latest version, update the global packages. If you are starting a brand new angular project, you must update comprehensive packages. Still, if you want to upgrade an existing project, you have to update project-specific packages.

You can perform the necessary update to the current stable release of the core framework and CLI by running the ng update @angular/cli @angular/core commands. To upgrade to the next beta or pre-release version, you can use the –next=true option while running the command.

To upgrade from one major angular version to another version, use the format ng update @angular/cli@^<major_version> @angular/core@^<major_version>.

Update Angular CLI to the latest version

To update Angular CLI to the latest version:

1. Uninstall the old version of Angular CLI
2. Verify NPM Cache using the npm cache verify command.
3. Please install the latest version of Angular CLI (Currently, it is Angular CLI)

If you are an angular developer, then you have seen that they are releasing a minimum of 2 versions almost every year. So you have to be up to date with the latest version. You can find more about Angular CLI on its official documentation.

You can check your current version of Angular CLI using the following command.

As you can see from the above image, I have version Angular CLI 9. So, the next step is to upgrade  Angular CLI 9 to the next version of Angular CLI.

To update the latest angular-cli package, follow the steps below.

First, we need to uninstall the old version of Angular CLI. In our case, uninstall Angular CLI 9.

sudo npm uninstall -g angular-cli // For Mac or Linux 
npm uninstall -g angular-cli // For Windows Open Powershell on Administrator Mode

Then we have to clear the cache using the below command.

sudo npm cache verify 

or
 
// for windows in admin mode 
npm cache verify

Install the Angular CLI or the latest version using the following command.

sudo npm install -g @angular/cli@latest

 sudo npm install -g @angular/cli@latest
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@10.0.0 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google u
nder
Google’s Privacy Policy at https://policies.google.com/privacy? For more details
 and
how to change this setting, see http://angular.io/analytics. No
+ @angular/cli@10.0.0
updated 1 package in 21.537s

From the output, you can see that we have successfully installed Angular CLI version 10.

To verify that in our system, type the following command.

ng --version

Output

That is it. Now, you can see that we have upgraded Angular CLI to the latest version.

You can see that the RxJS version is also changed to the latest 6.5.5.

After upgrading the dependencies, clear the npm cache to avoid errors.

It is always the best practice to verify the npm cache.

sudo npm cache verify 
npm cache clean (for older npm versions)

Angular CLI Upgrade Errors and Fixes

While upgrading Angular CLI, you may get an error like when you hit the following command to check the angular version.

ng version --v

You will get the following error.

Now, this error is related to the node version.

You can fix this error by keeping the Node to either of the following versions.

If you are working with Angular, please keep the Node versions 10, 12, or 14. 

Don’t use the odd number version of Node. Instead, always keep the even version of Node.

To upgrade node.js, check out how to update a node.js guide.

Now, to check the node.js version, type the following command.

node -v

I have the Node.js 14.4 version installed on my Mac.

node -v
v14.4.0

After upgrading node.js, try and run the above Angular CLI upgrade steps, and you are ready.

When you were upgrading Angular CLI and got any error, the best solution would be to uninstall that Angular CLI, fix the issue, and again install the Angular CLI. 

This way, most of the Angular CLI-related errors will be solved.

So, our primary goal to upgrade an Angular CLI to the latest version here is over.  

If you have an existing angular project and want to upgrade to a version, follow the steps below.

How to Upgrade existing Angular Project

If you have already created an Angular project and updated that project to angular 10, go to the angular project directory and type the following command.

ng update @angular/core

Upgrading RxJS

You can update the RxJS using the ng update command.

ng update rxjs

Create a new Angular Project

To create a new Angular project, type the following command.

ng new angularcrud 
cd angularcrud 
ng serve

sudo chown -R $USER:$GROUP ~/.npm 
sudo chown -R $USER:$GROUP ~/.config

➜  angular ng new angularcrud
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass   [ https://sass-lang.com/
documentation/syntax#the-indented-syntax ]
CREATE angularcrud/README.md (1031 bytes)
CREATE angularcrud/.editorconfig (274 bytes)
CREATE angularcrud/.gitignore (631 bytes)
CREATE angularcrud/angular.json (3710 bytes)
CREATE angularcrud/package.json (1263 bytes)
CREATE angularcrud/tsconfig.base.json (458 bytes)
CREATE angularcrud/tsconfig.json (475 bytes)
CREATE angularcrud/tslint.json (3184 bytes)
CREATE angularcrud/.browserslistrc (648 bytes)
CREATE angularcrud/karma.conf.js (1025 bytes)
CREATE angularcrud/tsconfig.app.json (292 bytes)
CREATE angularcrud/tsconfig.spec.json (338 bytes)
CREATE angularcrud/src/favicon.ico (948 bytes)
CREATE angularcrud/src/index.html (299 bytes)
CREATE angularcrud/src/main.ts (372 bytes)
CREATE angularcrud/src/polyfills.ts (2835 bytes)
CREATE angularcrud/src/styles.sass (80 bytes)
CREATE angularcrud/src/test.ts (753 bytes)
CREATE angularcrud/src/assets/.gitkeep (0 bytes)
CREATE angularcrud/src/environments/environment.prod.ts (51 bytes)
CREATE angularcrud/src/environments/environment.ts (662 bytes)
CREATE angularcrud/src/app/app-routing.module.ts (246 bytes)
CREATE angularcrud/src/app/app.module.ts (393 bytes)
CREATE angularcrud/src/app/app.component.sass (0 bytes)
CREATE angularcrud/src/app/app.component.html (25757 bytes)
CREATE angularcrud/src/app/app.component.spec.ts (1080 bytes)
CREATE angularcrud/src/app/app.component.ts (218 bytes)
CREATE angularcrud/e2e/protractor.conf.js (869 bytes)
CREATE angularcrud/e2e/tsconfig.json (299 bytes)
CREATE angularcrud/e2e/src/app.e2e-spec.ts (646 bytes)
CREATE angularcrud/e2e/src/app.po.ts (301 bytes)