How To Update Angular CLI Version 10

To update Angular CLI to the latest version, which is right now 10 then, you need to update the global packages. If you are starting a brand new angular project, then you need to update comprehensive packages. Still, if you want to upgrade an existing project, then you have to update project-specific packages as well.

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

How To Update Angular CLI To Version 10

To update Angular CLI 10, we need to follow the below steps.

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

If you are an angular developer, then you have seen that almost every year, they are releasing a minimum of 2 versions. 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 Angular CLI 10.

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

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

Now, install the Angular CLI 10 or the latest version by 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, which is 10 right now.

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 end up getting an error like the following 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 one 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 good to go.

When you were upgrading Angular CLI and got any error, then the best solution would uninstall that Angular CLI and 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 a 10 version here is over.  

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

How to Upgrade existing Angular Project

If you have already created an Angular project and update 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 10 Project

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

ng new angular10crud 
cd angular10crud 
ng serve

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

➜  angular ng new angular10crud
? 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 angular10crud/README.md (1031 bytes)
CREATE angular10crud/.editorconfig (274 bytes)
CREATE angular10crud/.gitignore (631 bytes)
CREATE angular10crud/angular.json (3710 bytes)
CREATE angular10crud/package.json (1263 bytes)
CREATE angular10crud/tsconfig.base.json (458 bytes)
CREATE angular10crud/tsconfig.json (475 bytes)
CREATE angular10crud/tslint.json (3184 bytes)
CREATE angular10crud/.browserslistrc (648 bytes)
CREATE angular10crud/karma.conf.js (1025 bytes)
CREATE angular10crud/tsconfig.app.json (292 bytes)
CREATE angular10crud/tsconfig.spec.json (338 bytes)
CREATE angular10crud/src/favicon.ico (948 bytes)
CREATE angular10crud/src/index.html (299 bytes)
CREATE angular10crud/src/main.ts (372 bytes)
CREATE angular10crud/src/polyfills.ts (2835 bytes)
CREATE angular10crud/src/styles.sass (80 bytes)
CREATE angular10crud/src/test.ts (753 bytes)
CREATE angular10crud/src/assets/.gitkeep (0 bytes)
CREATE angular10crud/src/environments/environment.prod.ts (51 bytes)
CREATE angular10crud/src/environments/environment.ts (662 bytes)
CREATE angular10crud/src/app/app-routing.module.ts (246 bytes)
CREATE angular10crud/src/app/app.module.ts (393 bytes)
CREATE angular10crud/src/app/app.component.sass (0 bytes)
CREATE angular10crud/src/app/app.component.html (25757 bytes)
CREATE angular10crud/src/app/app.component.spec.ts (1080 bytes)
CREATE angular10crud/src/app/app.component.ts (218 bytes)
CREATE angular10crud/e2e/protractor.conf.js (869 bytes)
CREATE angular10crud/e2e/tsconfig.json (299 bytes)
CREATE angular10crud/e2e/src/app.e2e-spec.ts (646 bytes)
CREATE angular10crud/e2e/src/app.po.ts (301 bytes)