How to Update the Angular version on your machine

Mirza Leka
6 min readJul 13, 2023

--

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

If 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/cli

This 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 x64

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

Node Version Manager official logo

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

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

With 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@14

And if this does not work, I’ll explain how to fix it in the next module.

The Matrix system failure from PxFuel

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/cli

Because 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@latest

This should do the job.
Keep in mind that you also need a compatible version of Node.js.

Photo by Leeloo Thefirst from Pexels

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

However, 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.1

Or this:

> npm i -g @angular/cli@15

That 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 👋

--

--

Mirza Leka

Web Developer. DevOps Enthusiast. I share my experience with the rest of the world. Follow me on https://twitter.com/mirzaleka for news & updates #FreePalestine