Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Errors after Angular 4 upgrade from Angular 2

I get these errors in the CLI after upgrading from Angular2 to Angular4. Though my app is still working after the upgrade, I'm just wondering how or if these errors can be resolved. Any ideas?

cli logs

Package.json before upgrade :

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "foundation-sites": "^6.3.1",
    "ng2-translate": "^5.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.1",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

Package.json after upgrade :

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^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/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "foundation-sites": "^6.3.1",
    "ng2-translate": "^5.0.0",
    "rxjs": "^5.1.0",
    "typescript": "^2.2.2",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.1",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}
like image 471
Tom Shen Avatar asked Mar 28 '17 09:03

Tom Shen


People also ask

What is the difference between angular 2 and Angular 4?

Although Angular 2 was a complete rewrite of AngularJS, there are no major differences between Angular 2 and Angular 4. Angular 4 is only an improvement and is backward compatible with Angular 2.

Can we change Angular version?

Upgrade Angular CLI globally The Angular CLI is installed on global level as well as on project level. If you upgrade Angular CLI version inside Angular project then it shall update only project's Angular CLI version. The global Angular CLI version can be upgraded by removing previous version and installing newer one.

How do I update my local version of Angular commands?

Update Angular CLI version GloballyFirst uninstall the existing Angular cli packages. Then run npm cache verify command to clear the node packages cache. Then install latest Angular CLI version using npm install -g @angular/cli@latest command.


1 Answers

You upgraded @angular libraries, but you didn't upgrade required dependecies. I suggest you to use npm-check-updates. It's the simplest way to upgrade all dependencies in your package.json. Try this:

Step 1. To install npm-check-updates:

npm i -g npm-check-updates

Step 2. to upgrade all dependencies:

npm-check-updates -u

@EDIT: or for the latest version npm-check-updates:

ncu -a

Step 3. To install upgrading dependencies:

npm install
like image 157
Jaroslaw K. Avatar answered Oct 04 '22 19:10

Jaroslaw K.