Several Unmet peer dependency errors, including @angular/common@2.4.9

Question

I've been struggling with package dependencies for the past couple of days, my goal is to use angular2-busy but i started reading about it and I think I have a bigger overall problem.

Whenver I run "npm list" I get a bunch of UNMET PEER DEPENDENCY messages.

I wanted to start cleaning that up and the first entry was:

"UNMET PEER DEPENDENCY @angular/common@2.4.9"

I tried re-installing @angular/common but that didn't make any difference, could somebody explain to me what's the actual issue here so I can start cleaning all this up?

Thanks.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.4",
    "@angular/compiler": "~2.4.4",
    "@angular/core": "~2.4.4",
    "@angular/forms": "~2.4.4",
    "@angular/http": "~2.4.4",
    "@angular/platform-browser": "~2.4.4",
    "@angular/platform-browser-dynamic": "~2.4.4",
    "@angular/router": "~3.4.4",
    "angular-in-memory-web-api": "~0.2.2",
    "angular2-busy": "^1.0.2",
    "angular2-datatable": "^0.5.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "lodash": "^4.17.4",
    "ng2-filter-pipe": "^0.1.6",
    "ng2-toasty": "^2.3.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/lodash": "ts2.0",
    "@types/node": "^7.0.4",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "gulp": "^3.9.1",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "repository": {}
}

Answer 1

Firs of all what you are trying to do?

npm list is for listing installed packages it will not install/update anything.

You should do npm install or npm update

I have copied your package.json and executed these command lines:

npm cache clean
npm install
npm update

And everything works!

To check dependencies versions try to use npm-check-updates

To install use this command:

npm install -g npm-check-updates

After install from command line run ncu and you will see what is the latest version of the packages.

One more thing regarding version numbers in npm check this article Node and npm Version Numbering: Guide and Best Practices

After updates to the latest versions your package.json look like this:

   {
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.4",
    "@angular/compiler": "~2.4.4",
    "@angular/core": "~2.4.4",
    "@angular/forms": "~2.4.4",
    "@angular/http": "~2.4.4",
    "@angular/platform-browser": "~2.4.4",
    "@angular/platform-browser-dynamic": "~2.4.4",
    "@angular/router": "~3.4.4",
    "angular-in-memory-web-api": "~0.3.1",
    "angular2-busy": "^1.0.2",
    "angular2-datatable": "^0.5.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "lodash": "^4.17.4",
    "ng2-filter-pipe": "^0.1.6",
    "ng2-toasty": "^2.3.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.2.0",
    "systemjs": "0.20.9",
    "zone.js": "^0.8.0"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.45",
    "@types/lodash": "ts2.0",
    "@types/node": "^7.0.4",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "gulp": "^3.9.1",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.5.2",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~5.1.1",
    "rimraf": "^2.5.4",
    "tslint": "^4.5.1",
    "typescript": "~2.2.1"
  },
  "repository": {}
}