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开发工具（与网络风暴开发工具相对），我会收到以下错误：

（SystemJS）意外的标记＆lt;↵语法错误：意外的标记＆lt;↵at eval（）at at Object.eval（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（{{ 3}}）↵在eval（）↵评估http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js:39:3↵评估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

Answer 1

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

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

1 个答案: