UNMET PEER ABHÄNGIGKEIT D3.js und Angular 2

Question

Ich habe ein vorhandenes Angular 2-Projekt, und ich versuche, einige D3.js in mein Projekt zu integrieren. Ich bin neu in Angular, und dies wird mein erster Schritt bei der Verwendung von D3 sein. Ich werde nach diesem Tutorial werden: https://keathmilligan.net/create-reusable-chart-components-with-angular-2-and-d3-js-version-4/

Ich bin mit dem Befehl npm install --save d3, und ich bekomme:

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

... dann

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. 

Zum einen, ich denke, ich m noch nicht genau klar, was es wirklich bedeutet, wenn ich "UNMET PEER DEPENDENCY" sehe. Ist das nur eine Warnung oder deutet dies darauf hin, dass etwas wirklich kaputt ist? Mein Projekt funktioniert derzeit (aber ich habe nicht mit D3 begonnen) ... Ist nur die falsche Version von etwas installiert? Ich habe die Schritte der Aktualisierung alles über npm update --save gemacht, und NPM fand einige Updates für mich, aber ich habe immer noch das gleiche Problem.

Meine Hauptfrage, ich installiere D3js, sollte das nicht völlig unabhängig von Angular sein? Warum bellt NPM über Angular Stuff, wenn ich etwas ohne Bezug installiere?

Hier ist meine 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 Protokolle sind nur Warnungen keine Fehler.

Sie warnen Sie, dass die lib, die Sie verwenden, @ngtools/webpack@1.2.1 sollte @angular/compiler@^2.3.1 (mehr Infos auf ^https://stackoverflow.com/a/22345808/5706293) verwenden, wie ich bin sicher, dass Sie sich selbst herausgefunden.

Der Autor dieser Bibliotheken kann veraltete APIs haben und unterstützt möglicherweise den aktuellen Code in späteren Versionen nicht. Das ist einer der Gründe, warum Sie Ihre Abhängigkeiten aktualisieren sollten.

Answer 2

Dies beantwortet nicht alle Fragen, die ich hatte, aber es löscht die Warnungen, die ich bekam. Ich habe gerade einige Pakete auf die neuesten Versionen aktualisiert.

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

Ich hatte auch ähnliches Problem, ich habe die Schritte gefolgt

Zuerst npm -g installieren @ Winkel/cli

neues Projekt mit neuen Helden-App ng

Nach gehen Sie in den Projektordner und führen Sie Server ng dienen

und öffnen Sie den Browser und führen http://localhost:4200

Das ist Arbeit für mich .. Hoffe die gleiche Sache für Sie auch arbeiten