How to Update the Angular version on your machine
Are you an Angular developer looking for a way to adjust Angular versions? This article will teach you how to successfully upgrade or downgrade the Angular version for your project needs using Node Version Manager.
Who is this article for?
- Developers installing Angular for the first time
- Developers that need to upgrade or downgrade the local Angular version to meet the project version
- Developers that have issues with changing versions
Setup Angular for the first time
To set up Angular, you need to have Node.js installed on your machine. Head on over to Nodejs.org. Here you can install one of two options:
- Long-Term Support version (recommended approach) or
- Latest version
Choose your version. Upon downloading open up the the installer and follow the steps.
You can find more versions on the Downloads page, but if you need a custom version I recommend using Node Version Manager (NVM).
Upon installing Node.js on your machine, open up a terminal (or command prompt on Windows) and type:
> node -v
e.g. 16.20.0
> npm -v
e.g. 8.19.4If you see a version output, it means that Node.js is successfully installed on your machine. Now you can use NPM to install Angular.
Install Angular
Open up your terminal again (or use the existing window) and install Angular CLI:
> npm i -g @angular/cliThis will install Angular globally on your machine. What this means is that you can generate a new Angular project (via CLI) anywhere on your PC.
You can verify that Angular is installed by running ng version:
> ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.1.0
Node: 16.20.0
Package Manager: npm 8.19.4
OS: win32 x64From this point, you can create a new angular app using:
> ng new <app-name>To install a specific version of Angular you can do the following:
> npm i -g @angular/cli@x.y.z.Where the x.y.z represents a package version through Semantic versioning. However, you may not always be able to install any version you want. More on this below.
Upgrade to specific Angular/Node.js version
Since Angular and Node.js depend on each other, you need to have compatible versions of both. That’s why the Angular team has this compatibility table to let you know which version of Node.js is compatible with the version of Angular.
To easily switch between the Node.js versions you use NVM. This guide will teach you how to download and set NVM up on your machine.
NVM allows you to install a specific version of Node.js on your machine through the terminal.
For starters, you can use the nvm list command to see Node.js versions you have installed on your PC.
> nvm list
19.7.0
18.2.0
* 16.20.0 (Currently using 64-bit executable)
16.15.1
14.21.3To install a specific version of Node.js, use:
> nvm install 14 (where 14 is version you want to install)
Downloading node.js version 14.21.3 (64-bit)...
Complete
Creating C:\Users\<USERNAME>\AppData\Roaming\nvm\temp
Downloading npm version 6.14.18... Complete
Installing npm v6.14.18...
Installation complete.To switch to the version you’ve just installed use
> nvm use 14
Now using node v14.21.3 (64-bit)To confirm that Node.js is indeed switched to version 14, run:
> node -v
v14.21.3With the Node.js version adjusted, look up that compatibility table between Angular and Node.js and install the Angular version that is relevant to your project and compatible with the Node.js version., e.g:
npm i -g @angular/cli@14And if this does not work, I’ll explain how to fix it in the next module.
When Upgrade does not work
It’s possible that you’d want to upgrade the package version and your OS is not letting you. For example, you use NVM to switch to a specific version
(nvm use v14) then you look up the Node.js version (node -v) and it’s still displaying the previous version.
What now?
Well, this particular issue can occur when you do not have admin permissions on your machine. Then the only viable option is to completely uninstall Node.js from your machine (and perhaps npm cache files if you find any on your machine) and then install everything from scratch.
However, there is a beautiful workaround. Rename your installation directory (on Windows) from C:\Program Files\nodejs to C:\Program Files\nodejsx and then run nvm use 14 again, followed by node -v, and the version of Node.js should change to 14.
The credit goes to user ituasdu on GitHub.
If this fails refer to the previous solution.
To fix Angular repeat the step I mentioned where you look up the compatibility table and install the correct version.
Upgrade back to the Latest
If you already have Angular installed at a specific version, e.g. 14 and you want to install the latest (16), chances are that the following command will not work:
> npm i -g @angular/cliBecause your machine will see that it already has Angular installed and stops before reinstalling. To tell it to upgrade to the latest, simply use the latest flag:
> npm i -g @angular/cli@latestThis should do the job.
Keep in mind that you also need a compatible version of Node.js.
Upgrade to Angular 17 with server-side-rendering
Semantic Versioning
Node.js packages use Semantic versioning to describe the package version. It works like this, package-name, followed by @ and x.y.z:
Where
- The first version number is a package major version (15)
- The second is minor (1) and
- The third is the patch version (2)
This means that you’ll install Angular version 15.1.2.
> npm i -g @angular/cli@15.1.2However, if you do not care much about some specific minor release, you can make this shorter by doing this:
> npm i -g @angular/cli@15.1Or this:
> npm i -g @angular/cli@15That will install Angular version 15.
Wrapping up
This article explained how to successfully adjust Angular versions for your project needs. For more things on Angular, make sure to check my blog about 35 features that make Angular stand out.
For everything else awesome, hit the follow button.
Bye for now 👋
