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.
- Uninstall the old version of Angular CLI
- Verify NPM Cache using npm cache verify command.
- 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
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.
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.
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
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
Now, see the newly installed Angular 10 project.
➜ 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)
At the time of creating a new Angular project, they are asking two things.
- If we want to create routing or not.
- What kind of styling do we need to use in the angular 10 project. I have selected Sass.
After providing the suitable options, it will create a new angular project.
Finally, our Angular CLI 10 update or upgrade tutorial is over.