Updating applications on Angular from 4 to 5 versions

Question

I have an application written in Angular 4.

package.json:

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngui/datetime-picker": "^0.16.2",
    "angular2-modal": "^3.0.1",
    "angular2-text-mask": "^8.0.1",
    "core-js": "^2.4.1",
    "flexboxgrid": "^6.3.1",
    "moment": "^2.18.1",
    "ng-select": "^1.0.0-beta.5",
    "ng2-pagination": "^2.0.2",
    "ng2-toastr": "^4.1.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngui/datetime-picker": "^0.16.2",
    "angular2-modal": "^3.0.1",
    "angular2-text-mask": "^8.0.1",
    "core-js": "^2.4.1",
    "flexboxgrid": "^6.3.1",
    "moment": "^2.18.1",
    "ng-select": "^1.0.0-beta.5",
    "ng2-pagination": "^2.0.2",
    "ng2-toastr": "^4.1.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }
}

How can it be updated to Angular 5 without damaging the code? The last time I tried to update it some of the code stopped working. I will be very grateful to everyone who will help.

Answer 1

To upgrade your app I recommend this read

In a nutshell you should run:

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

You can replace @5.0.0 with any version of 5.x you wanna use.

The other thing you'll need is to update Typescript to 2.4.2 and RxJS to 5.5.2

npm install typescript@2.4.2 rxjs@5.5.2