title: Upgrading angular 2.0.0 to 2.4.x
body: <p>I'm trying to upgrade my Angular 2.0.0 application to 2.4.8 i used following link guides <a href="https://www.npmjs.com/package/npm-check-updates" rel="nofollow noreferrer">https://www.npmjs.com/package/npm-check-updates</a>. but i get some error.</p>
  
  <p><strong>Old dependencies</strong></p>
  
  <pre><code>dependencies": {
  "@angular/common": "2.0.0",
  "@angular/compiler": "2.0.0",
  "@angular/core": "2.0.0",
  "@angular/forms": "2.0.0",
  "@angular/http": "2.0.0",
  "@angular/platform-browser": "2.0.0",
  "@angular/platform-browser-dynamic": "2.0.0",
  "@angular/platform-server": "2.0.0",
  "@angular/router": "3.0.0",
  "@types/node": "^6.0.38",
  "angular2-platform-node": "~2.0.10",
  "angular2-universal": "~2.0.10",
  "angular2-universal-polyfills": "~2.0.10",
  "aspnet-prerendering": "^1.0.6",
  "aspnet-webpack": "^1.0.11",
  "bootstrap": "^3.3.7",
  "css": "^2.2.1",
  "css-loader": "^0.25.0",
  "es6-shim": "^0.35.1",
  "expose-loader": "^0.7.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.9.0",
  "isomorphic-fetch": "^2.2.1",
  "jquery": "^2.2.1",
  "preboot": "^4.5.2",
  "raw-loader": "^0.5.1",
  "rxjs": "5.0.0-beta.12",
  "style-loader": "^0.13.0",
  "to-string-loader": "^1.1.5",
  "ts-loader": "^0.8.2",
  "typescript": "^2.0.0",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.14",
  "webpack-externals-plugin": "^1.0.0",
  "webpack-hot-middleware": "^2.10.0",
  "webpack-merge": "^0.14.1",
  "zone.js": "^0.6.21"
  }
  </code></pre>
  
  <p><strong>New dependencies</strong></p>
  
  <pre><code>"dependencies": {
  "@angular/common": "2.4.8",
  "@angular/compiler": "2.4.8",
  "@angular/core": "2.4.8",
  "@angular/forms": "2.4.8",
  "@angular/http": "2.4.8",
  "@angular/platform-browser": "2.4.8",
  "@angular/platform-browser-dynamic": "2.4.8",
  "@angular/platform-server": "2.4.8",
  "@angular/router": "3.4.8",
  "@types/node": "^7.0.5",
  "angular2-platform-node": "~2.1.0-rc.1",
  "angular2-universal": "~2.1.0-rc.1",
  "angular2-universal-polyfills": "~2.1.0-rc.1",
  "aspnet-prerendering": "^2.0.3",
  "aspnet-webpack": "^1.0.11",
  "bootstrap": "^3.3.7",
  "css": "^2.2.1",
  "css-loader": "^0.26.1",
  "es6-shim": "^0.35.1",
  "expose-loader": "^0.7.1",
  "extract-text-webpack-plugin": "^1.0.1",
  "file-loader": "^0.10.0",
  "isomorphic-fetch": "^2.2.1",
  "jquery": "^3.1.1",
  "preboot": "^4.5.2",
  "raw-loader": "^0.5.1",
  "rxjs": "5.2.0",
  "style-loader": "^0.13.0",
  "to-string-loader": "^1.1.5",
  "ts-loader": "^2.0.1",
  "typescript": "^2.0.0",
  "url-loader": "^0.5.7",
  "webpack": "^2.2.1",
  "webpack-externals-plugin": "^1.0.0",
  "webpack-hot-middleware": "^2.10.0",
  "webpack-merge": "^3.0.0",
  "zone.js": "^0.7.7"
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { UniversalModule } from 'angular2-universal';
  import { AppComponent } from './components/app/app.component'
  import { NavMenuComponent } from './components/navmenu/navmenu.component';
  import { HomeComponent } from './components/home/home.component';
  import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
  import { CounterComponent } from './components/counter/counter.component';
  
  @NgModule({
      bootstrap: [ AppComponent ],
      declarations: [
          AppComponent,
          NavMenuComponent,
          CounterComponent,
          FetchDataComponent,
          HomeComponent
      ],
      imports: [
          UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
          RouterModule.forRoot([
              { path: '', redirectTo: 'home', pathMatch: 'full' },
              { path: 'home', component: HomeComponent },
              { path: 'counter', component: CounterComponent },
              { path: 'fetch-data', component: FetchDataComponent },
              { path: '**', redirectTo: 'home' }
          ])
      ]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p><strong>Error Log</strong></p>
  
  <pre><code>npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  npm WARN extract-text-webpack-plugin@1.0.1 requires a peer of webpack@^1.9.11 but none was installed.
  npm WARN angular2-universal-polyfills@2.1.0-rc.1 requires a peer of zone.js@~0.6.21 but none was installed.
  npm WARN angular2-universal@2.1.0-rc.1 requires a peer of rxjs@~5.0.0-beta.12 but none was installed.
  npm WARN angular2-universal@2.1.0-rc.1 requires a peer of zone.js@~0.6.21 but none was installed.
  npm WARN Angular2Spa@0.0.0 No repository field.
  npm WARN Angular2Spa@0.0.0 No license field.
  npm ERR! Windows_NT 10.0.14393
  npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\ivisual\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
  npm ERR! node v6.9.4
  npm ERR! npm  v4.1.1
  npm ERR! path C:\Users\ivisual\Documents\Visual Studio 2015\Projects\ng20\ng20\node_modules\.staging\lodash-f67ffa4b\fp\bindAll.js
  npm ERR! code ENOENT
  npm ERR! errno -4058
  npm ERR! syscall lstat
  
  npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\ivisual\Documents\Visual Studio 2015\Projects\ng20\ng20\node_modules\.staging\lodash-f67ffa4b\fp\bindAll.js'
  npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\ivisual\Documents\Visual Studio 2015\Projects\ng20\ng20\node_modules\.staging\lodash-f67ffa4b\fp\bindAll.js'
  npm ERR! enoent This is most likely not a problem with npm itself
  npm ERR! enoent and is related to npm not being able to find a file.
  npm ERR! enoent
  
  npm ERR! Please include the following file with any support request:
  npm ERR!     C:\Users\ivisual\Documents\Visual Studio 2015\Projects\ng20\ng20\npm-debug.log
  </code></pre>