How do I correctly upgrade angular 2 (npm) to the latest version?

Question

Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.

and left off with Angular 2 beta 8. Now I resumed the tutorial and latest beta is beta 14.

If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).

If I do npm update angular 2 or npm update angular2@2.0.0beta.14 it just does nothing either.

`npm install angular2@2.0.0beta.14 --save` should do it, I think. — Joe Clay, Apr 13 '16 at 12:06
For people coming to this from Google, be aware that there may be issues after updating Angular itself, that require you to also update angular-cli if you're using that. See https://github.com/angular/angular-cli#updating-angular-cli for the details on how. — jmq, Jan 10 '17 at 17:25

Cosmin Ababei · Accepted Answer · 2017-04-12T07:42:28.267

207

The command npm update -D && npm update -S will update all packages inside package.json to their latest version, according to their defined version range. You can read more about it here.

If you want to update Angular from a version prior to 2.0.0-rc.1, then you'll need to manually edit package.json, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.

Notes:

A cool way to stay up to date with your packages' latest version is to use npm outdated which shows you all outdated packages together with their wanted and latest version.
The reason why we need to chain two commands, npm update -D and npm update -S is to overcome this bug until it's fixed.

edited Apr 12 '17 at 07:42

answered Apr 13 '16 at 12:32

Cosmin Ababei

7,003
2
20
34

2

thanks Cosmin. I followed Joe Clay advice and it worked. Your is however a more general solution which is definitely good. I also recommend using **npm-install-missing** (another npm package) in case of any outdated dependencies. – dragonmnl Apr 13 '16 at 12:56
3

That module is quite old and I think it's due to the fact that npm was having some problems with `npm update`, which got fixed in the meantime. A cool way to see if `npm update --save` worked is to see if `npm outdated` doesn't display anything. – Cosmin Ababei Apr 13 '16 at 13:09
npm install @angular not angular2 :-) – Elisabeth Sep 28 '16 at 20:04
@Elisabeth I'm not sure what you mean. `@angular` doesn't exist. [angular2](https://www.npmjs.com/package/angular2) is the correct npm name. – Cosmin Ababei Sep 28 '16 at 20:28
1

My npm name is @angular. angular2 was before the beta17 kind like that – Elisabeth Sep 28 '16 at 21:30
1

@Elisabeth I've finally understood and I'll update my answer. Thanks! – Cosmin Ababei Sep 29 '16 at 09:14
any update to this? is the 'bug' fixed. and isn't -S now optional? – Simon_Weaver Jan 12 '18 at 03:49
If create using Angular CLI, just update angular cli using npm install --save-dev @angular-cli@latest and update project using ng update -next – Love Hasija Mar 27 '18 at 05:05

score 54 · Answer 2 · answered Oct 02 '16 at 23:31

54

Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final is npm-check-updates

It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated it is also capable to edit your package.json, enabling you to do a npm upgrade later.

Install

sudo npm install -g npm-check-updates

Usage

ncufor display

ncu -u for re-writing your package.json

answered Oct 02 '16 at 23:31

Seven

4,353
2
27
30

great works for me but what https://stackoverflow.com/a/46148361/2055782 will do ? – Mohsin AR Jan 02 '18 at 18:48

Isak La Fleur · Answer 3 · 2018-01-16T20:19:56.017

Upgrade to latest Angular 5

Angular Dep packages: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Other packages that are installed by the angular cli npm install --save core-js@latest rxjs@latest zone.js@latest

Angular Dev packages: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Types Dev packages: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Other packages that are installed as dev dev by the angular cli: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Install the latest supported version used by the Angular cli (don't do @latest): npm install --save-dev typescript@2.4.2

Rename file angular-cli.json to .angular-cli.json and update the content:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Excellent. Note that `rxjs@latest` updated to `6.0.0` which is currenlty not compatible with the last Angular version (`5.2.1`). I had to revert manually and it was fine. — David Dahan, May 03 '18 at 12:12

angularrocks.com · Answer 4 · 2018-10-23T00:14:51.607

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

With ng update sometimes you might want to add --force flag. If you do so make sure that the version of typescript you got installed this way is supported by your current angular version, otherwise you might need to downgrade the typescript version.

Also checkout this guide Updating your Angular projects

For bash users only

If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that oneliner:

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Just specify version you wan't e.g @4.4.5 or put @latest to get the latest

Check your package.json just to make sure you are updating all @angular/* packages that you app is relying on

To see exact @angular version in your project run:
npm ls @angular/compiler or yarn list @angular/compiler
To check the latest stable @angular version available on npm run:
npm show @angular/compiler version

HexaCrop · Answer 5 · 2018-03-13T05:40:04.417

Official npm page suggest a structured method to update angular version for both global and local scenarios.

1.First of all, you need to uninstall the current angular from your system.

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2.Clean up the cache

npm cache clean

EDIT

As pointed out by @candidj

npm cache clean is renamed as npm cache verify from npm 5 onwards

3.Install angular globally

npm install -g @angular/cli@latest

4.Local project setup if you have one

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

Please check the same down on the link below:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

This will solve the problem.

`npm cache clean` is now changed to` npm cache verify` as of `npm 5` — candidJ, Mar 13 '18 at 05:25

score 4 · Answer 6 · answered Oct 10 '17 at 18:02

4

Alternative approach using npm-upgrade:

npm i -g npm-upgrade

Go to your project folder

npm-upgrade check

It will ask you if you wish to upgrade the package, select Yes

That's simple

answered Oct 10 '17 at 18:02

Zameer Ansari

28,977
24
140
219

Poul Kruijt · Answer 7 · 2017-09-22T06:30:24.807

3

If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

If you also use the cli, you can do this:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

This will save the packages exact (-E), and the cli packages in devDependencies (-D)

edited Sep 22 '17 at 06:30

answered Sep 01 '17 at 13:42

Poul Kruijt

69,713
12
145
149

it doesn't work for me, always says unmet dependency :/ – DS_web_developer Sep 15 '17 at 07:39
@DS_web_developer that's okay. Those are just warnings, not errors – Poul Kruijt Sep 15 '17 at 07:40
sadly not, it says FAILED, and my package json is not updated of course (unmet dependencies are for each of the angular packages) – DS_web_developer Sep 15 '17 at 07:42
what are the unmet dependencies? – Poul Kruijt Sep 15 '17 at 07:49
well, this is if I do @ next and not latest, just to be clear.... but at least I get the @next version easily so I can update my package.json ;) now all works on ng5.... wooo hooo :) – DS_web_developer Sep 15 '17 at 07:49
1

Ah, well I guess the unmet dependency is `TypeScript` then, beacuse the latest ng5 requires a higher ts version :) – Poul Kruijt Sep 15 '17 at 07:50

score 3 · Answer 8 · edited Jun 20 '20 at 09:12

3

Just start here:

https://update.angular.io

Select the version you're using and it will give you a step by step guide.

I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.

As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)

The steps will outline how to use it :-)

edited Jun 20 '20 at 09:12

Community

1
1

answered May 04 '18 at 22:15

Simon_Weaver

140,023
84
646
689

Don't confuse `NgUpgrade` with `ng update`. `NgUpgrade` is for updating AngularJS to Angular – Simon_Weaver May 04 '18 at 22:17
Recently I've had many issues updating, especially errors related to angular material. I've had to delete the contents of `node_modules` and run `npm install` the last 3 updates - even 6.0 -> 6.1. No idea why, but if you're getting many odd errors on a simple update then give it a shot. – Simon_Weaver Aug 04 '18 at 20:33

score 1 · Answer 9 · answered Jun 14 '18 at 09:00

npm uninstall --save-dev angular-cli

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

ng update @angular/cli

ng update @angular/core --force

ng update @angular/material or npm i @angular/cdk@6 @angular/material@6 --save

npm install typescript@'>=2.7.0 <2.8.0'

score 0 · Answer 10 · answered Jan 06 '18 at 08:50

Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.

this checks for all satisfy and checks for best fit.

i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run

npm i

to install newly suggested dependencies.

score 0 · Answer 11 · answered Jan 21 '19 at 14:41

If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:

Open the console on your project folder: If you type: ng update then you will get the below message:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

So I usually go straight and do:

ng update --all

Finally you can check your new version:
ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

How do I correctly upgrade angular 2 (npm) to the latest version?

11 Answers11

For bash users only

Just start here:

Linked

Related