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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.