我正在尝试导入D3,以便我可以在Angular2模块中使用它。
一些背景信息:
我做了什么:
我安装了NPM D3包:
npm install d3 --save
我使用Typings安装了D3类型描述,因为这是Angular2-Seed用于已安装的库的。
typings install d3 --save
然后,在我的Angular2模块文件中,我添加了import语句
import * as d3 from 'd3';
结果是TSC给我错误消息“找不到模块'd3'”。我错过了什么或做错了什么?
答案 0 :(得分:3)
因此,如果在 package.json 中,您已经拥有依赖关系:
"dependencies": {
...
"d3": "^3.5.17",
...
}
然后您可以进入 /tools/config/seed.config.ts 并添加 ' d3':' $ {this.NPM_BASE} d3 / d3.min.js' SYSTEM_CONFIG_DEV 对象,如:
protected SYSTEM_CONFIG_DEV: any = {
defaultJSExtensions: true,
packageConfigPaths: [
`${this.NPM_BASE}*/package.json`,
`${this.NPM_BASE}**/package.json`,
`${this.NPM_BASE}@angular/*/package.json`
],
paths: {
[this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
'@angular/core': `${this.NPM_BASE}@angular/core/bundles/core.umd.js`,
'@angular/common': `${this.NPM_BASE}@angular/common/bundles/common.umd.js`,
'@angular/compiler': `${this.NPM_BASE}@angular/compiler/bundles/compiler.umd.js`,
'@angular/forms': `${this.NPM_BASE}@angular/forms/bundles/forms.umd.js`,
'@angular/http': `${this.NPM_BASE}@angular/http/bundles/http.umd.js`,
'@angular/router': `${this.NPM_BASE}@angular/router/index.js`,
'@angular/platform-browser': `${this.NPM_BASE}@angular/platform-browser/bundles/platform-browser.umd.js`,
'@angular/platform-browser-dynamic': `${this.NPM_BASE}@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
'rxjs/*': `${this.NPM_BASE}rxjs/*`,
'd3': '${this.NPM_BASE}d3/d3.min.js',
'app/*': `/app/*`,
'*': `${this.NPM_BASE}*`
},
packages: {
rxjs: { defaultExtension: false }
}
如果有帮助,请告诉我。谢谢!
答案 1 :(得分:1)
我有同样的问题,上面的答案有助于调试我的问题 - 因为它确定这是一个配置问题,但是使用angular2@2.1.0我必须更新{root} /e2e/tscconfig.json(添加:
"types": [
"d3"
]
如下:
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc-e2e",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"d3"
]
}
}
请记住,{root} / src /中也有一个tscconfig.json。我在这里更新了,我仍然遇到了依赖性问题:
import * as D3 from 'd3';
在我的组件中通过错误。希望这对至少一个人有帮助!
答案 2 :(得分:0)
对于Angular 5 +
您可以这样做:
npm i -g typings
npm i d3@3.5.5 --save
typings install d3=github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts#6e2f2280ef16ef277049d0ce8583af167d586c59 --global --save