angular - 如何将 d3.js 添加到 angular2

Question

这是我的 packagke.json 的一部分:

"dependencies": {
    "@angular/common": "2.3.0",
    "@angular/compiler": "2.3.0",
    "@angular/compiler-cli": "2.3.0",
    "@angular/core": "2.3.0",
    "@angular/forms": "2.3.0",
    "@angular/http": "2.3.0",
    "@angular/platform-browser": "2.3.0",
    "@angular/platform-browser-dynamic": "2.3.0",
    "@angular/platform-server": "2.3.0",
    "@angular/router": "3.3.0",
    "@angular/upgrade": "2.3.0",
    "angular2-in-memory-web-api": "0.0.21",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "d3": "4.5.0",
    "reflect-metadata": "^0.1.8",
    "rollup-plugin-includepaths": "^0.2.1",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/d3": "4.5.0",

这是我的 system.config.js 文件:

paths: {
    'npm':'node_modules',
    'home':  getDocumentBase()
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                       'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  'd3': 'npm:d3/build/d3.min.js'

},

npm 包安装正常，类型已安装到 node_modules/@types，但是当我尝试导入 d3 时

import * as D3 from 'd3';

我找不到模块“d3”。

tsc -v 版本 2.0.10 npm -v 3.10.10

我在这里做错了什么？

谢谢!

Answer 1

npm install --save d3

检查package.json(dependancies)中安装的版本 去node_modules里面查看

您只需在 component.ts 中导入即可在组件中使用 d3

import * as d3 from "d3"