incompatible with Angular 2

[rolandjitsu]

There seems to be some kind of conflict when using Angular 2 and Plotly. The same issue is somewhat described in #7218.

For now, the only fix is including plotly before angular's zone.js dependency.

Could there be something done from within this lib?

[etpinard]

We'll remove the es6-promise polyfill entirely from plotly.js in v2.0.0 (see complete list of planned modifications here).

That said, perhaps we could already (in the v1.x series) distribute a plotly.js bundle w/o the es6-promise polyfill? I'd vote 👍 on that if this issue gets more backers.

In the meantime, I'd recommend:

• cloning the repo
• cd into it then npm i,
• removing this line
• running npm run build and
• then use the resulting dist/plotly.js bundle.

I hope this helps.

[rolandjitsu]

Thanks for the quick response, looks like a lot of work on the next version. It may make sense to have a patch with the promise polyfill removed already.

Promises are widely supported (IE not) and it always makes sense to let the user decide on which polyfill to use.

I prefer using npm to mange my dependencies, so rolling a build of my own is not something I would do. For now, I just include before angular deps, which still allows me to be up to date with the newer versions.

I think that a simple doc on including the promise polyfill for those that use browsers which don't support it yet, should be enough. I'm not sure though how much work would be required in order to remove the polyfill, but if it's just a line, I think it's worth doing it.

Thanks again 👍

[brian428]

Was this ever addressed? Trying to add plotly to an Angular 2 project and it is hanging the browser, probably because of the Promise conflict.

[amellnik]

Including it from the CDN in index.html and using declare var Plotly: any; in the controller is pretty hacky, but works fine for me in a few angular-cli apps.

[sn0wcat]

it seems to still be broken in angular/cli apps. The hack from amellnik works though.

[damienbod]

I have a working example here:
https://damienbod.com/2016/04/21/creating-an-angular-2-component-for-plotly/
Greetings Damien

[prateek0103]

@damienbod It would be helpful to publish the angular2 component to npm, open source community could then pick it up. Thanks for the tutorial.

[arlowhite]

@angular/cli: 1.0.0
node: 6.9.1
os: linux x64
@angular/core: 4.0.0
TypeScript 2.2.2

With npm plotly.js (includes polyfill)
With plotly.js configured as a global script
declare var Plotly: any;
ng server builds fine, but my app fails to load. I don't see any errors at all in the console.

If I try to import * as Plotly from 'plotly.js'; I get this error:

Error: It appears that you're using glslify in browserify without its transform applied.
Make sure that you've set up glslify as a source transform: https://github.com/substack/node-browserify#browserifytransform

Re-build without polyfill
@alexcjohnson re-build without polyfill trick worked.
(with Plotly configured as a global script in angular-cli.json)

If you just want to use my build, add this to package.json
"plotly.js": "git+https://github.com/arlowhite/plotly.js#no-polyfill",

No matter what I've tried, import * as Plotly from 'plotly.js'; results in an error.

FYI, for angular-cli users:

  "scripts": [
    "../node_modules/plotly.js/dist/plotly-basic.min.js"
  ],

(see the dist directory for alternate builds: plotly.js, plotly-basic.js, etc)

Also, there are type definitions: npm install @types/plotly.js --save-dev

import { PlotlyStatic } from '@types/plotly.js';
declare var Plotly: PlotlyStatic;

Yes, a build without the polyfill would be nice. Or maybe all builds shouldn't have it and just document how to add the polyfill to your app?

[etpinard]

@arlowhite what tool are you using to bundle your app? plotly.js works best with browserify. Here's how to make it work with webpack.

[arlowhite]

@etpinard Thanks, but unfortunately, angular-cli hides webpack.config.json from you.

I updated my previous comment to describe how I got plotly.js working with angular-cli.

EDIT: Just FYI, angular-cli does not plan to allow access to webpack config but maybe will create some addon system.