UNMET PEER DEPENDENCY D3.js and Angular 2

Question

I have an existing Angular 2 project, and I'm trying to get started integrating some D3.js into my project. I'm new to Angular, and this will be my first go at using D3. I'll be following this tutorial: https://keathmilligan.net/create-reusable-chart-components-with-angular-2-and-d3-js-version-4/

I'm running the command npm install --save d3, and I get:

├── UNMET PEER DEPENDENCY @angular/compiler@2.2.3
├── UNMET PEER DEPENDENCY @angular/compiler-cli@2.2.3
├── UNMET PEER DEPENDENCY @angular/core@2.2.3
└── d3@4.4.1

...then

npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler@^2.3.1 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/core@^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 tslint-loader@2.1.5 requires a peer of tslint@^3.0.0 but none was installed.

For one, I guess I'm still not exactly clear on what it really means when I see "UNMET PEER DEPENDENCY". Is this just a warning, or is this indicating that something is really broken? My project works currently (but I haven't started coding with D3)... Is it merely that the wrong version of something is installed? I've taken the steps of updating everything via npm update --save, and NPM did find some updates for me, but I still have the same issue.

My main question though, I'm installing D3js, shouldn't that be completely independent of Angular? Why is NPM barking about Angular stuff when I am installing something unrelated?

Here is my package.json post update:

  "name": "cl-test2",
  "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"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "^2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "@types/node": "^6.0.58",
    "angular-cli": "^1.0.0-beta.22-1",
    "core-js": "^2.4.1",
    "d3": "^4.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "tslint": "^4.3.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.2.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "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": "^4.0.2",
    "typescript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}

After unmet peer dependency the console should print something like `angular requires a peer of angular.v.x but angular.v.x was installed instaed` can you also add that to your question? — eko, Jan 07 '17 at 10:26

score 3 · Accepted Answer · edited May 23 '17 at 12:09

UNMET PEER DEPENDENCY logs are just warnings not errors.

They warn you that the lib that you are using, @ngtools/webpack@1.2.1, should be using @angular/compiler@^2.3.1 (more info on ^ https://stackoverflow.com/a/22345808/5706293) as I'm sure you figured out yourself.

The author of those libs may have some deprecated APIs and may not support the current code in the later versions, that's one of the reasons that you should upgrade your dependencies.

score 0 · Answer 2 · answered Jan 07 '17 at 19:38

This doesn't answer all of the questions I had, but it does clear up the warnings I was getting. I just updated several packages to the latest versions.

{
  "name": "cl-test2",
  "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"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.2",
    "@angular/compiler": "^2.4.2",
    "@angular/core": "^2.4.2",
    "@angular/forms": "^2.4.2",
    "@angular/http": "^2.4.2",
    "@angular/platform-browser": "^2.4.2",
    "@angular/platform-browser-dynamic": "^2.4.2",
    "@angular/router": "^3.4.2",
    "core-js": "^2.4.1",
    "d3": "^4.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.2",
    "types.d3": "^0.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.2",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "^1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "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.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.1.4",
    "webdriver-manager": "10.2.5"
  }
}

score 0 · Answer 3 · answered Sep 17 '17 at 12:10

I had also similar issue, I have followed the steps

First, npm install -g @angular/cli

create new project with ng new hero-app

After the go inside the project folder and run server ng serve

and open browser and run http://localhost:4200

This is work for me.. Hope same thing work for you as well

UNMET PEER DEPENDENCY D3.js and Angular 2

3 Answers3