How to upgrade Angular CLI to the latest version

808,072

Solution 1

After reading some issues reported on the GitHub repository, I found the solution.

In order to update the angular-cli package installed globally in your system, you need to run:

npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Depending on your system, you may need to prefix the above commands with sudo.

Also, most likely you want to also update your local project version, because inside your project directory it will be selected with higher priority than the global one:

rm -rf node_modules
npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/cli@latest
npm install

thanks grizzm0 for pointing this out on GitHub.

After updating your CLI, you probably want to update your Angular version too.

Note: if you are updating to Angular CLI 6+ from an older version, you might need to read this.

Edit: In addition, if you were still on a 1.x version of the cli, you need to convert your angular-cli.json to angular.json, which you can do with the following command (check this for more details):

ng update @angular/cli --from=1.7.4 --migrate-only

Solution 2

First time users:

npm install -g @angular/cli

Update/upgrade:

npm install -g @angular/cli@latest

Check:

ng --version

See documentation.

Solution 3

ng6+ -> 7.0

Update RxJS (depends on RxJS 6.3)

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Remove rxjs-compat

Then update the core packages and Cli:

ng update @angular/cli @angular/core

(Optional: update Node.js to version 10 which is supported in NG7)

ng6+ (Cli 6.0+): features simplified commands

First, update your Cli

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Then, update your core packages

ng update @angular/core

If you use RxJS, run

ng update rxjs

It will update RxJS to version 6 and install the rxjs-compat package under the hood.

If you run into build errors, try a manual install of:

npm i rxjs-compat
npm i @angular-devkit/build-angular

Lastly, check your version

ng v

Note on production build:

ng6 no longer uses intl in polyfills.ts

//remove them to avoid errors
import 'intl';
import 'intl/locale-data/jsonp/en';

ng5+ (Cli 1.5+)

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next [email protected] rxjs@'^5.5.2'
npm install [email protected] --save-exact

Note:

  1. The supported Typescript version for Cli 1.6 as of writing is up to 2.5.3.
  2. Using @next updates the package to beta, if available. Use @latest to get the latest non-beta version.

After updating both the global and local package, clear the cache to avoid errors:

npm cache verify (recommended)
npm cache clean (for older npm versions)

Here are the official references:

  1. Updating the Cli
  2. Updating the core packages core package.

Solution 4

The following approach worked for me:

npm uninstall -g @angular/cli

then

npm cache verify

then

npm install -g @angular/cli

I work on Windows 10, sometimes I had to use: npm cache clean --force as well. You don't need to do if you don't have any problem during the installation.

Solution 5

The powerful command installs and replaces the last package.

I had a similar problem. I fixed it.

 npm install -g @angular/cli@latest

and

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

enter image description here

Share:
808,072

Related videos on Youtube

Francesco Borzi
Author by

Francesco Borzi

https://github.com/FrancescoBorzi

Updated on July 08, 2022

Comments

  • Francesco Borzi
    Francesco Borzi almost 2 years

    Using ng --version I got:

    @angular/cli: 1.0.0

    which is not the latest release available.

    Since I have Angular CLI globally installed on my system, in order to upgrade it I tried:

    npm update angular-cli -g

    But it does not work, because it stays to 1.0.0 version.

  • Francesco Borzi
    Francesco Borzi almost 7 years
    looks like more an addition to my answer than an answer, so maybe you can move it as a comment below my answer ?
  • Leonardo Souza Paiva
    Leonardo Souza Paiva almost 7 years
    sry, you are right but i need 50 of reputation to make a comment to your answer.
  • Stuti Verma
    Stuti Verma over 6 years
    Pedantic alert: You can find more details about changes between versions in the Releases tab on GitHub. Link: github.com/angular/angular-cli/releases
  • Francesco Borzi
    Francesco Borzi over 6 years
    this will work for a local Angular CLI, check my answer to uprade the global one
  • Sydwell
    Sydwell over 6 years
    If you are experiencing problems using these commands especially on windows machines. Try adding the --on-optional flag on both the npm install and uninstall commands.
  • Neyt
    Neyt over 6 years
    Update 2017 (npm@5) : if you really need to clean your cache : "npm cache clean --force"
  • Pini Cheyni
    Pini Cheyni over 6 years
    npm cache clean --force Really helped me
  • YASH DAVE
    YASH DAVE over 6 years
    why uninstall angular-cli and not whole @angular/cli?
  • ssougnez
    ssougnez over 6 years
    This is taken from the official notes. They uninstall angular-cli because it was the name of the package before the version 1.5 (I think), so it's recommended to remove it before installing the package under the new name (@angular/cli).
  • Rahmathullah M
    Rahmathullah M over 6 years
    upgraded my global cli
  • Drenai
    Drenai over 6 years
    Why oh why is this part no in the release notes!
  • crazyCoder
    crazyCoder about 6 years
    Running the command npm cache clean throws error 'As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to makesure everything is consistent, use 'npm cache verify' instead.' "if you want to force, you can add --force
  • svict4
    svict4 about 6 years
    @PushkalBoganatham as @neyt stated, you need to use the --force flag
  • razvanone
    razvanone about 6 years
    Pls. replace 'npm cache clean' with 'npm cache verify' for latest versions of npm.
  • Abhishek Chandel
    Abhishek Chandel almost 6 years
    Post @angular/[email protected] you only need one single command i.e ng update @angular/cli
  • Andre Coetzee
    Andre Coetzee almost 6 years
    # updating using npm $ npm i -g @angular/cli $ npm i @angular/cli # using Yarn $ yarn global add @angular/cli $ yarn add @angular/cli
  • Damir Varevac
    Damir Varevac over 5 years
    This is still working for Angular CLI: 6.1.2 update to Angular CLI: 6.1.3 using Node: 8.11.3
  • Yasir Shabbir Choudhary
    Yasir Shabbir Choudhary over 5 years
    use --force if terminal not allow to do this like npm cache clean --force
  • Joey Gough
    Joey Gough over 5 years
    can you please confirm what you said about RxJS 6 being deprecated. Everywhere I look it appears that v6 is the latest stable release github.com/ReactiveX/rxjs rxjs-dev.firebaseapp.com
  • Pageii Studio
    Pageii Studio over 5 years
    @JoeyGough nice catch! Ng7 depends on rxjs 6.3. Thanks for your comment. ref: github.com/angular/angular/blob/master/…
  • Mattijs
    Mattijs over 5 years
    Strange, updating from A6 to A7, when installing the @latest version globally, I end up with the same version (6.2.4). On a Mac, NPM 8.9.4. Did a npm uninstall -g @angular/cli which removed it globally. But after installing again, I got the same version of 6.
  • rickz
    rickz over 5 years
    @Mattijs, I have same problem. But, I am on Windows and I have npm version 6.4.1 . I even used npm cache verify --force and manually deleted the npm/node_modules/@angular folder.
  • Mattijs
    Mattijs over 5 years
    @rickz I ended up installing version@angular/[email protected] which worked
  • rickz
    rickz over 5 years
    @Mattijs Thank you very much! That worked for me too.
  • Ravi Sevta
    Ravi Sevta about 5 years
    use @next for beta version npm install -g @angular/cli@next, @latest for stable version npm install -g @angular/cli@latest, and @{{version_code}} for exact version like npm install -g @angular/[email protected]
  • Ambroise Rabier
    Ambroise Rabier over 4 years
    You don't need to specify @latest, as latest is the default.
  • veben
    veben over 4 years
    If this solution does not work for you: stackoverflow.com/a/58678941/8718377
  • Alexei - check Codidact
    Alexei - check Codidact over 3 years
    This seems to upgrade the CLI to the latest minor version.
  • Stewii
    Stewii about 3 years
    Just to bring this up to date, here it is from the horse's mouth (which means 'official source'): npmjs.com/package/@angular/cli#updating-angular-cli
  • Omar
    Omar about 3 years
    In my case ng v command just wasn't reflecting the new version right after npm i. Closing the terminal, opening it again and running ng v again showed the latest version
  • Omar
    Omar about 3 years
    If you don't see the new version after Update/upgrade try closing and reopening the terminal and run ng --version again
  • Kyle Vassella
    Kyle Vassella almost 3 years
    Thanks. is @latest still needed to upgrade in 2021? What happens if I already have an older version of Angular CLI installed globally and don't include the @latest tag?
  • Kofi Sammie
    Kofi Sammie over 2 years
    Yes do that and also in 2021 or yet 2022 you can Run "npx @angular/cli@13 update @angular/core@13 @angular/cli@13" which should bring you to version 13 of Angular since Angular now uses TypeScript 4.4 and is version 13. update.angular.io/?l=3&v=12.0-13.0