Angular2-Seed + Typings + D3：导入错误，'找不到模块'd3''答案

【问题标题】：Angular2-Seed + Typings + D3: Import error, 'Cannot find module 'd3''Angular2-Seed + Typings + D3：导入错误，'找不到模块'd3''
【发布时间】：2016-10-21 21:12:21
【问题描述】：

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

一些背景信息：

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

我做了什么：

我安装了 NPM D3 包：
```
npm install d3 --save
```
我使用 Typings 安装了 D3 类型描述，因为这是 Angular2-Seed 用于它已经安装的库的。
```
typings install d3 --save
```
然后，在我的 Angular2 模块文件中，我添加了导入语句
```
import * as d3 from 'd3';
```

结果是 TSC 给了我错误消息 “找不到模块 'd3'”。我错过了什么或做错了什么？

【问题讨论】：

你能尝试从here下载包吗
我安装了它，设置了discreteBarChart演示，但它根本没有出现在浏览器中，尽管没有浏览器错误，也没有编译器错误。但在我投入更多时间让 NG2-NVD3 工作之前，我最好停下来：NVD3 对我来说用处不大，因为我需要构建高度自定义的可视化。

标签： d3.js typescript angular typescript-typings

【解决方案1】：

所以如果在 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 }
    }

如果有帮助，请告诉我。谢谢！

【讨论】：

谢谢，这正是缺少的。在我使用 Angular2-Seed 之前，编辑 System.config() 的路径和/或包变量是添加大多数库的常见步骤，但我还没有学会如何在这个种子中做同样的事情。
在最终 Angular2 的第一个版本中，除了 systemjs.js 必须是安装了 d3.js 的文件夹。为了清楚起见，你必须指出你下载的地方我的 d3 与设置文件位于同一文件夹中，位于 d3 的子文件夹中，因此该行看起来像这样。 'd3': './d3/d3.min.js' 在我的例子中，这是地图中的最后一行：对象。感谢您的澄清。

【解决方案2】：

我遇到了同样的问题，上面的答案有助于调试我的解决方案 - 因为它确定这是一个配置问题，但是使用 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';

在我的组件中，通过错误。希望这对至少一个人有所帮助！

【讨论】：

感谢您的支持。我为打字打开了一个 RFC 以更新他们的 d3 打字，我收到了回复并提交了我的更改，他们接受了 - 但我从未构建过他们需要的测试文件....所以我不确定它是否已更新。

【解决方案3】：

对于 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

【讨论】：