Cannot package plotly.js via Webpack in Angular2

plotly.js
1

Hello,

I am having trouble with a very simple Angular2 + Plotly.js app that uses Webpack.

First of all, I am able to display a Plotly chart inside an angular2 component provided Plotly is injected into the global name-space via an explict script tag. In this case I omit any explict requires in my angular2 code and just assume that Plotly will be available when the page has loaded. This is a workable option for me, but I would like to be able to have more control over what portions of Plotly I include with my app.

However, If I pull in any specific plotly modules via requires in my angular2 code, and let webpack bundle the dependencies for me then the page containing the angular2 component fails to load.

There are no errors or any stack traces that I can see. It just fails to initialize the component.

I have tried several different ways of requiring plotly modules, including setting up a custom bundle as you suggest in the documentation. I am also using the ify loader to process everthing under my node_modules directory when webpack creates its bundles. Nothing seems to work. As soon as I require the anything from plotly.js/lib/core in the angule2 code the component no longer displays. I have looked at the webpack bundles and it does seem to have pulled in the needed definitions from Plotly.js. So I am stumped.

I am curious to see if anyone might have encountered this problem before and maybe can suggest some avenues for resolution.

Krishna

2

may be related to https://github.com/plotly/plotly.js/issues/955

3

@etienne: Commenting out the es6-polyfill import in core.js fixed the issue. wow - never would have figured that one out :smile:
Thank you very much for the quick response!!

Krishna

1 Like
4

Just in case anyone else finds this useful, I was able to avoid having to comment out the es6-polyfill import in core.js by making
a custom bundle for plotly.js and including that in the webpack pipeline before the polyfills are loaded (also using CommonsChunkPlugin to make sure that no additional imports from the app override this earlier import). This works well and I can use the standard plotly.js node in my build.

Thanks again @etienne for the pointers.

Krishna