How to upgrade Angular CLI to the latest version

AngularAngular Cli

Angular Problem Overview


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.

Angular Solutions


Solution 1 - Angular

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 - Angular

First time users:

npm install -g @angular/cli

Update/upgrade:

npm install -g @angular/cli@latest

Check:

ng --version

See documentation.

Solution 3 - Angular

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 typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --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 - Angular

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 - Angular

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

Solution 6 - Angular

This command works fine:

npm upgrade -g @angular/cli

Solution 7 - Angular

If you have any difficulties managing your global CLI version it is better to use NVM: MAC, Windows.

To update the local CLI in your Angular project follow this steps:

Starting from CLI v6 you can just run ng update in order to get your dependencies updated automatically to a new version.

ng update @angular/cli

With ng update sometimes you might want to add --force flag.

You can also pass --all flag to upgrade all packages at the same time.

ng update --all --force

If you want just to migrate CLI just run this:

ng update @angular/cli --migrateOnly

You can also pass flag --from=from- version from which to migrate from, e.g --from=1.7.4. This flag is only available with a single package being updated, and only on migration only.

> After update is done make sure that the version of typescript you got > installed supported by your current angular version, > otherwise you might need to downgrade the typescript version. Also bear in mind that usually the latest version of angular won't support the latest version of the typescript.

> Checkout Angular CLI / Angular / NodeJS / Typescript compatibility versions here

Also checkout this guide Updating your Angular projects and update.angular.io


OLD ANSWER:
All you need to do is to diff with angular-cli-diff and apply the changes in your current project.

Here is the steps:

  1. Say you go from 1.4. to 1.5 then you do https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0
  2. click on File changed tab
  3. Apply the changes to your current project.
  4. npm install / yarn
  5. Test all npm scripts (more details here: https://stackoverflow.com/a/45431592/415078)

Solution 8 - Angular

In addition to @ShinDarth answer.

I did what he said but my package did not updated the angular version, and I know that this post is about angular-cli, but i think that this can help too.

  • so after doing what @ShinDarth said above, to fix my angular version I had to create a new project with -ng new projectname that generated a package.
  • copy the new package, then paste the new package on all projects packages needing update (remember to add the dependencies you had and change the name on first line) or you can just change the versions manualy without copy and paste.
  • then run -npm install.

Now my ng serve is working again, maybe there is a better way to do all that, if someone know, please share, because this is a pain to do with all projects that need update.

Solution 9 - Angular

To update Angular CLI to a new version, you must update both the global package and your project's local package.

Global package:

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

Source: Github

Solution 10 - Angular

In my case, I have installed angular-cli locally using npm install --save-dev angular-cli.
So, when I use command npm install -g @angular/cli, it generates error saying

>Your global Angular CLI version (1.7.3) is greater than your local version (1.4.9)

Please note that angular-cli, @angular/cli and @angular/cli@latest are two different cli's.
What solves this is uninstall all cli and then install latest angular cli using

npm install -g @angular/cli@latest

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFrancesco BorziView Question on Stackoverflow
Solution 1 - AngularFrancesco BorziView Answer on Stackoverflow
Solution 2 - AngularKofi SammieView Answer on Stackoverflow
Solution 3 - AngularPageii StudioView Answer on Stackoverflow
Solution 4 - AngularEnayatView Answer on Stackoverflow
Solution 5 - AngularBehrouzMoslemView Answer on Stackoverflow
Solution 6 - AngularwdavilanetoView Answer on Stackoverflow
Solution 7 - Angularangularrocks.comView Answer on Stackoverflow
Solution 8 - AngularLeonardo Souza PaivaView Answer on Stackoverflow
Solution 9 - AngularHasan FathiView Answer on Stackoverflow
Solution 10 - AngularARKhanView Answer on Stackoverflow