Angular2-Seed + Typings + D3:导入错误,'找不到模块'd3''

时间:2016-06-20 14:47:27

标签: d3.js typescript angular typescript-typings

我正在尝试导入D3,以便我可以在Angular2模块中使用它。

一些背景信息:

  • 我在TypeScript中编写Angular2。
  • 我正在使用Angular2-seed

我做了什么:

  1. 我安装了NPM D3包:

    npm install d3 --save
    
  2. 我使用Typings安装了D3类型描述,因为这是Angular2-Seed用于已安装的库的。

    typings install d3 --save
    
  3. 然后,在我的Angular2模块文件中,我添加了import语句

    import * as d3 from 'd3';
    
  4. 结果是TSC给我错误消息“找不到模块'd3'”。我错过了什么或做错了什么?

3 个答案:

答案 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