title: How to upgrade Angular CLI project?
body: <p>I'm attempting to upgrade my angular 2 project from <code>2.0.0</code> to <code>2.4.1</code>.  I understand that semantic versioning has been adopted since the <code>2.0.0</code> release and <code>2.x.x</code> releases should be drop-in replacements.  My experience seems to indicate otherwise. Maybe I just don't know what I'm doing but I have not found this to be straightforward...</p>
  
  <h2><strong>Attempt 1 - Manual Version Upgrade</strong></h2>
  
  <p>My naive first approach was to manually update my <code>@angular</code> dependencies. You can reference my package.json below (update 1).  I made these changes, then did an <code>npm install</code> and I got several warnings then got the following error when I tried to do an <code>ng serve</code>.</p>
  
  <blockquote>
    <p>Cannot read property 'AssetUrl' of undefined</p>
  </blockquote>
  
  <p>And my warnings...</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.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  npm WARN @angular/core@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
  npm WARN @angular/core@2.4.1 requires a peer of zone.js@^0.7.2 but none was installed.
  npm WARN @angular/http@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
  npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed.
  npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
  npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed.
  npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
  npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
  npm WARN @ngtools/webpack@1.2.1 requires a peer of webpack@^2.1.0-beta.25 but none was installed.
  </code></pre>
  
  <p>So I went down the rabbit hole of trying to fix these warnings but I don't know how to fix all of them (e.g. @ngtools/webpack) and some of them appear to be in conflict with each other.  So I abandoned the manual approach of updating my angular 2 version...</p>
  
  <p><strong>Original package.json</strong></p>
  
  <pre><code>{
    "name": "frontend",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor",
      "build": "ng build",
      "buildProd": "ng build --env=prod"
    },
    "private": true,
    "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/material": "^2.0.0-alpha.9-experimental-pizza",
      "@angular/platform-browser": "2.0.0",
      "@angular/platform-browser-dynamic": "2.0.0",
      "@angular/router": "3.0.0",
      "@types/google-libphonenumber": "^7.4.8",
      "angular2-datatable": "^0.4.2",
      "apollo-client": "^0.4.22",
      "core-js": "^2.4.1",
      "google-libphonenumber": "^2.0.4",
      "graphql-tag": "^0.1.15",
      "hammerjs": "^2.0.8",
      "ng2-bootstrap": "^1.1.16",
      "rxjs": "5.0.0-beta.12",
      "ts-helpers": "^1.1.2",
      "zone.js": "^0.6.26"
    },
    "devDependencies": {
      "@types/hammerjs": "^2.0.33",
      "@types/jasmine": "^2.2.30",
      "@types/lodash": "^4.14.39",
      "angular-cli": "1.0.0-beta.16",
      "codelyzer": "~0.0.26",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "2.0.2",
      "typings": "1.4.0"
    }
  }
  </code></pre>
  
  <p><strong>Update 1 of package.json</strong></p>
  
  <pre><code>{
    "name": "frontend",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor",
      "build": "ng build",
      "buildProd": "ng build --env=prod"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "2.4.1",
      "@angular/compiler": "2.4.1",
      "@angular/core": "2.4.1",
      "@angular/forms": "2.4.1",
      "@angular/http": "2.4.1",
      "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
      "@angular/platform-browser": "2.4.1",
      "@angular/platform-browser-dynamic": "2.4.1",
      "@angular/router": "3.0.0",
      "@types/google-libphonenumber": "^7.4.8",
      "angular2-datatable": "^0.4.2",
      "apollo-client": "^0.4.22",
      "core-js": "^2.4.1",
      "google-libphonenumber": "^2.0.4",
      "graphql-tag": "^0.1.15",
      "hammerjs": "^2.0.8",
      "ng2-bootstrap": "^1.1.16",
      "rxjs": "5.0.1",
      "ts-helpers": "^1.1.2",
      "zone.js": "^0.7.2"
    },
    "devDependencies": {
      "@types/hammerjs": "^2.0.33",
      "@types/jasmine": "^2.2.30",
      "@types/lodash": "^4.14.39",
      "angular-cli": "1.0.0-beta.16",
      "codelyzer": "~0.0.26",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "2.0.2",
      "typings": "1.4.0"
    }
  }
  </code></pre>
  
  <h2><strong>Attempt 2 - Use npm-check-updates</strong></h2>
  
  <p>Since when I tried to cherry-pick my angular dependencies for updates I ended up in a spiderweb of other dependencies that needed to be updated, I next tried to just update everything.</p>
  
  <p>Based on <a href="https://stackoverflow.com/a/16074029/2860319">this answer</a> I tried the following:</p>
  
  <pre><code>npm i -g npm-check-updates
  npm-check-updates -u
  npm install
  </code></pre>
  
  <p>This went fine but when I tried ng serve I get the following error:</p>
  
  <blockquote>
    <p>ERROR in AppModule is not a NgModule</p>
  </blockquote>
  
  <p>Using information gathered <a href="https://github.com/angular/angular-cli/issues/3157" rel="noreferrer">here</a>, I downgraded my typescript version, that error went away, but a new error popped up.</p>
  
  <blockquote>
    <p>ERROR in Error encountered resolving symbol values statically.
    Reference to a non-exported function (position 29:10 in the original
    .ts file), resolving symbol restPaths in rest-paths.ts, resolving symbol
    AppModule in app.module.ts,
    resolving symbol AppModule in app.module.ts</p>
  </blockquote>
  
  <p>I've been fighting my way through these errors but the fact that I am having so much trouble is raising red flags.</p>
  
  <p><strong>Can anybody help?  Am I taking the wrong approach?</strong></p>
  
  <p>Note that I have seen some suggestions about updating angular-cli projects that recommend uninstalling angular-cli and reinstalling it, then doing an ng init and overwriting your configuration files. This didn't work for me because I already had the latest version.</p>
  
  <p><em>Edit:
  The statement about having the latest angular-cli was incorrect. I had <code>angular-cli version 1.0.0-beta.16</code> whereas the latest at the time of this edit is <code>1.0.0-beta.24</code>.  Nevertheless, I did try to update my angular-cli and run ng init on my existing project. I notice now that I didn't follow the steps outlined on the angular-cli github page precisely.  I skipped the <code>npm install --save-dev angular-cli@latest</code>, and I blew away all my node_modules instead of using the rm command they outline.</em></p>