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:
- Uninstall the old version of Angular CLI
- Verify NPM Cache using the npm cache verify command.
- 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
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.
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.
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
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
Now, see the newly installed Angular project.
➜ 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)
When creating a new Angular project, they are asking for two things.
- If we want to create routing or not.
- What kind of styling do we need to use in the angular project? I have selected Sass.
After providing the suitable options, it will create a new angular project.
That’s it for this tutorial.