How to update to Angular’s latest CLI version @angular/cli

It’s no longer news that Angular now have a new version of the command line (@angular/cli). The issue however is how can you update your command line interface to the latest version. This article will take you through the process of updating to the latest cli.

THE RULE

Remember that angular-cli is installed globally on your system, that means before you can update the version of your project, you need to update the global version first and here’s how to do it.

1. Uninstall the old version with this command

npm uninstall -g angular-cli

2. Clear the cache

npm cache clean

3. install the latest version

npm install -g @angular/cli@latest

And we are good. However, if you try to use angular commands like ng serve on your angular project you will discover that it will shoot an error at you, that is because the cli version of our project is yet to be updated.

Here’s how to update your project cli version:

1. Delete your node_modules folder

rmdir /S node_modules #use rm -rf on mac

if you have a dist(auto generated folder when you ‘ng build’ command) folder in your project you need to remove it like so:

rmdir /S node_modules dist

2. Install and add the latest version of @angular/cli to your package.json file as a development dependency.

npm install --save-dev @angular/cli@latest

3. Install node packages

npm install

4. Update

ng update

running the ‘update’ command will check for changes in the auto generated files that come with angular projects out-of-the-box and you be ask if you want to overwrite the existing with the new. You will also be prompted to choose from four options, y(yes), n(no), d(difference) and h(help). Choose with discretion.

If you run into any trouble, checkout angular cli change log, but updating your dependencies to the latest version should solve most problem.