在Angular 2应用程序中使用本地npm仓库中的组件

我已经使用d3和Angular 2实现了一个通用的图表组件。然后将它发布到本地的npm仓库中，以便任何人只要运行npm install my-chart命令就可以在他们的Angular项目中使用这个图表组件。

我创build了一个基本的Angular 2项目来重用我的图表组件。 然后运行npm install my-chart –save ，向package.json添加“@ my / my-chart”：“^ 1.0.0” 。 但运行服务器时出现问题，它会在我的控制台上提示错误。

Module not found: Error: Can't resolve 'd3' in '...\node_modules\@my\my-chart' 

我需要在我的Angular项目中安装D3吗？ 但是我觉得在我们运行npm install my-chart的时候，把d3和图表组件捆绑在一起会更好。

什么是最好的？

已发布软件包的package.json文件：

 { "name": "@my/my-chart", "version": "1.0.2", "license": "MIT", "angular-cli": {}, "author": "rosew", "main": "./index.js", "keywords": [ "button", "card" ] } 

消费包的package.json文件：

 "dependencies": { "@angular/common": "2.4.6", "@angular/compiler": "2.4.6", "@angular/core": "2.4.6", "@angular/forms": "2.4.6", "@angular/http": "2.4.6", "@angular/platform-browser": "2.4.6", "@angular/platform-browser-dynamic": "2.4.6", "@angular/router": "3.4.6", "core-js": "2.4.1", "rxjs": "5.0.1", "ts-helpers": "1.1.2", "zone.js": "0.7.6", "@my/core": "1.1.176", "@my/my-button": "^1.0.9", "@my/my-chart": "^1.0.1" }, "devDependencies": { "@angular/cli": "1.0.0-beta.31", "@angular/compiler-cli": "2.4.6", "@types/jasmine": "2.5.38", "@types/node": "6.0.42", "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.4.2", "typescript": "2.0.3" } 

Answer 1

项目找不到d3的原因是没有指定为依赖项的地方，所以不能包含它。

你有两个select：

第一个select是将d3作为依赖项添加到库中，并将在@ my / my-chart的安装中加载。

第二个选项，更好的方法是将d3作为对等关系添加到您的库中。 这迫使消费图书馆importd3。 有几个很好的理由，如给消费者更多的依赖关系的控制，并减less重叠，如果多个依赖需要d3。

有一件事情，不要select任何选项，确保对d3的依赖性尽可能广泛，以便在d3发布更新时不会locking到某个版本。

my-chart package.json

 { "name": "@my/my-chart", ... "peerDependencies": { "d3": "^4.0.0" } } 

消费者package.json

 { "name": "consuming-package", ... "dependencies": { "d3": "^4.6.0" } }