UNMET PEER DEPENDENCY D3.js和Angular 2

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/

我有一个现有的Angular 2项目，我正在尝试将一些D3.js集成到我的项目中。我是Angular的新手，这将是我第一次使用D3。我将遵循这个教程：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:

我正在运行命令npm install --save d3，我得到：

├── 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.

首先，我想当我看到“UNMET PEER DEPENDENCY”时，我仍然不清楚它的真正含义。这只是一个警告，还是这表明某些事情真的被打破了？我的项目目前正在运行（但我还没有开始用D3编码）......仅仅是安装了错误版本的东西吗？我已经采取了通过npm update -save更新所有内容的步骤，NPM确实为我找到了一些更新，但我仍然有同样的问题。

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?

我的主要问题是，我正在安装D3js，不应该完全独立于Angular吗？当我安装不相关的东西时，为什么NPM会对Angular的东西咆哮？

Here is my package.json post update:

这是我的package.json帖子更新：

  "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"
  }
}

3 个解决方案

#1

UNMET PEER DEPENDENCY logs are just warnings not errors.

UNMET PEER DEPENDENCY日志只是警告而不是错误。

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://*.com/a/22345808/5706293) as I'm sure you figured out yourself.

他们警告你，你正在使用的lib，@ ngtools / webpack @ 1.2.1，应该使用@ angular / compiler @ ^ 2.3.1（关于^ https://*.com/a/22345808/5706293的更多信息）因为我相信你已经弄明白了。

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.

这些库的作者可能有一些弃用的API，并且可能不支持更高版本中的当前代码，这是您应该升级依赖项的原因之一。

#2

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"
  }
}

#3

I had also similar issue, I have followed the steps

我也有类似的问题，我已经按照步骤

First, npm install -g @angular/cli

首先，npm install -g @ angular / cli

create new project with ng new hero-app

使用ng new hero-app创建新项目

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

进入项目文件夹后运行服务器ng服务

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

并打开浏览器并运行http：// localhost：4200

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

这对我有用..希望同样适合你的事情

#1