UNMET PEER DEPENDENCY D3.js and Angular 2 - node.js

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

Answer 1

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.

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

Answer 3

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