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

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.

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

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 clinpm 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": {}  }}