在 Angular2/Node/Express/MongoDB 应用程序中使用 d3.js答案

【问题标题】：Using d3.js in Angular2/Node/Express/MongoDB App在 Angular2/Node/Express/MongoDB 应用程序中使用 d3.js
【发布时间】：2017-07-04 21:55:41
【问题描述】：

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

我还应该注意到，所有用于 d3 的智能感知都很好地显示在 Web Storm 中。

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

组件.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 开发工具（与 webstorm 开发工具相反），我会收到以下错误：

(SystemJS) Unexpected token http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js:15:10)↵ at eval (http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js:38:4)↵ at eval (http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js:39:3)↵ at 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

【问题讨论】：

标签： javascript node.js angular d3.js

【解决方案1】：

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

【讨论】：