在Angular2 / Node / Express / MongoDB App中使用d3.js

Question

我正在尝试将d3.js（ https://www.npmjs.com/package/d3 ）引入我的项目，并且在页面加载时出现ZoneAwareError 。 我已经运行npm install d3 --save ，一切都很好。 我遵循了有关如何将其导入到Angular2组件的文档，但是在页面加载时收到以下错误：

我还应注意，d3的所有intellisense都可以在Web Storm中正常显示。

ZoneAwareError
  (anonymous function)  
  ZoneDelegate.invoke   
  Zone.run  
  (anonymous function)  
  ZoneDelegate.invokeTask   
  Zone.runTask  
  drainMicroTaskQueue   
  ZoneTask.invoke   

Component.ts

import {Component, OnInit} from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'map-component',
  templateUrl: '/mlbstats.map.component.html',
  styleUrls: ['mlbstats.map.component.css']
})

export class MapComponent implements OnInit {
  constructor(){

  }
  ngOnInit(): void {
      d3.select('p');  
  }
}

如果我注释掉d3.select('p'); 页面加载正常。 要完成此工作，是否需要完成一个额外的步骤？ ZoneAwareError确切地转换为什么？ 我无法获得更好的错误消息，所以我不确定是什么原因引起的。 如果使用Chrome开发工具（与Web Storm开发工具相对），则会出现以下错误：

（SystemJS）意外令牌<↵语法错误：意外令牌<↵在eval（）↵在Object.eval（ http：// localhost：3000 / app /../ public / pages / PortfolioComponent / MLBStats / MapComponent / mlbstats.map。评估时为component.js：15：10 ）（评估时为http：// localhost：3000 / app /../ public / pages / PortfolioComponent / MLBStats / MapComponent / mlbstats.map.component.js：38：4 ） （ http：// localhost：3000 / app /../ public / pages / PortfolioComponent / MLBStats / MapComponent / mlbstats.map.component.js：39：3 ）↵在eval（）↵评估http：// localhost：3000 /d3.js↵评估http：// localhost：3000 / app /../ public / pages / PortfolioComponent / MLBStats / MapComponent / mlbstats.map.component.js↵评估http：// localhost：3000 / app /。 /public/app.module.js↵评估http：// localhost：3000 / app /../ public / main.js↵加载http：// localhost：3000 / app /../ public / main.js时出错

Answer 1

不是我一直在寻找的解决方案，而是import * as d3 from 'd3'删除import * as d3 from 'd3'并设置declare let d3: any @Component装饰器上方的declare let d3: any解决了问题。 我还必须将<script src="node_modules/d3/build/d3.js"></script>到我的index.html文件中。