Upgrade Angular version (now: 2.4.3 or 4.0.0-beta.3) following the best practice?

Issue

Now that Angular is following a Semantic Versioning, and Angular2.4.3 were released, I’m a little confused here on what is the best practice when I upgrade to the next Angular version in existing project.

I’ve a project with Angular-cli, with @angular/core: 2.2.0. Here is my package.json:

"dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@types/jasmine": "^2.5.40",
    "angular2-click-outside": "^0.1.0",
    "angular2-modal": "^2.0.2",
    "bootstrap": "4.0.0-alpha.4",
    "bootstrap-loader": "^2.0.0-beta.15",
    "core-js": "^2.4.1",
    "karma-remap-istanbul": "^0.2.2",
    "material-design-icons": "^3.0.1",
    "ng2-bootstrap": "^1.1.16",
    "ng2-charts": "^1.4.4",
    "postcss-loader": "^1.1.1",
    "rxjs": "5.0.0-rc.4",
    "screenfull": "^3.0.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "1.0.0-beta.3",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "node-sass": "^3.13.0",
    "protractor": "4.0.11",
    "replace": "0.3.0",
    "ts-node": "1.7.0",
    "tslint": "3.15.1",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.8"
  }

Question: How do I upgrade to the next Angular version(now: 2.4.3 or 4.0.0-beta.3) following the best practice? Using npm or yarn.

Solution

I’ve upgraded my app from Angular 2.4.0 to 4.0.2 without any code changes! Bare in mind, though that it depends of which features/classes/methods you are using.

I ran

npm i @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest typescript@latest --S -E

then

npm i @angular/compiler-cli@latest --D -E

NOTE: use @latest if you want the latest stable version. Use @next if you want the latest ‘bleeding edge’ version.

Answered By – ThiagoPXP

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.