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

Question

I'm trying to bring d3.js ( https://www.npmjs.com/package/d3 ) into my project and I get a ZoneAwareError on page load. I have ran npm install d3 --save and everything got brought in just fine. I followed the documentation on how to import it into my Angular2 Component but receive the below error on page load:

I should also note that all intellisense for d3 is showing up in Web Storm just fine.

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');  
  }
}

If I comment out the line d3.select('p'); the page loads fine. Is there an extra step that needs to be completed for this to work? What exactly does the ZoneAwareError translate to? I can't get a better error message so I'm not sure what is causing this. If I use the Chrome dev tools (opposed to the web storm dev tools) I get the below error:

(SystemJS) Unexpected token <↵ SyntaxError: Unexpected token <↵ at eval ()↵ 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 ( http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js:39:3 )↵ at eval ()↵ Evaluating http://localhost:3000/d3.js ↵ Evaluating http://localhost:3000/app/../public/pages/PortfolioComponent/MLBStats/MapComponent/mlbstats.map.component.js ↵ Evaluating http://localhost:3000/app/../public/app.module.js ↵ Evaluating http://localhost:3000/app/../public/main.js ↵ Error loading http://localhost:3000/app/../public/main.js

Answer 1

Not the solution I was looking for but, removing import * as d3 from 'd3' and setting declare let d3: any above my @Component decorator solved the problem. I also had to add <script src="node_modules/d3/build/d3.js"></script> to my index.html file.