Plotly.js: 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 :+1: 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.

[prateek0103]

@arlowhite I have been down the same road. Projects built using Angular CLI don't offer any method to use custom loader which is required by glslify to work. Check out this issue on angular-cli repo for more details. If you are using basic charts and _don't require_ GLSL, then you can go for plotly-basic.js which can be found in node_modules/plotly.js/dist.

[arlowhite]

@prateek0103 Ok, thanks. dist/plotly.js does load and renders the getting started plot. You think it will break if I use a plotly.js API that requires GLSL?

[yugi03]

@arlowhite : In response to your reply to @etpinard, now angular is exposing webpack.config.json. You can see it here

[szechyjs]

The following worked for me with angular-cli.

yarn add plotly.js
yarn add @types/plotly.js --dev

Add the following to src/tsconfig.app.json:

{
  "compilerOptions": {
    ...
    "paths": {
      "plotly.js": [
        "../node_modules/plotly.js/dist/plotly.js"
      ]
    },
    "types": [
      "plotly.js"
    ],
    ...
}

I haven't fully tested the use of dist/plotly.js it may break if GLSL plots are used, you can also use dist/plotly-basic.js, which should have no problems.

You can then utilize fully typed Plotly in your components:

import * as Plotly from 'plotly.js';
import {Config, Data, Layout} from 'plotly.js';

Edit: I had forgot to show the addition of plotly.js to the types definition in tsconfig.app.json. I've updated the snippet above. I'm not sure if this is necessary, however the angular-cli documentation says to add it.

Edit: To further optimize your imports you can do the following since the webpack tree-shaking does not work on plotly.js. Rather than importing a single dist file, only import the source files you need for your plots.

{
  "compilerOptions": {
    ...
    "paths": {
      "plotly.js": [
        "../node_modules/plotly.js/lib/core.js",
        "../node_modules/plotly.js/lib/scatter.js"
      ]
    },
    ...
}

[rolandjitsu]

One addition to @szechyjs 's comment: do not use { ... "strict": true ... } compiler option as it will not work.

[avbentem]

Just a heads up: using plotly.js/dist/plotly-basic.js rather than plotly.js/dist/plotly.js in the solutions above will get one a much smaller bundle. Of course, this limits the support to basic graphs only.

(Despite --an attempt of?-- tree shaking using Angular CLI's --prod flag, this still adds about 700 KB to my application, but the full one would add 2.32 MB for me.)

[cicinelli]

The following worked without any update to the tsconfig after importing plotly.js and types. Passing the nativeElement from the ViewChild reference allows me to mark-up multiple instances of the component on a single view.

import { Component, Input, OnInit, ViewChild } from "@angular/core";
import * as Plotly from "plotly.js/dist/plotly-basic.js";
import { Config, Data, Layout } from "plotly.js/dist/plotly-basic.js";

@Component({
  selector: "plotly-chart",
  template: `
    <div #plotly></div>
  `,
  styleUrls: ["./plotly-chart.component.scss"]
})
export class PlotlyChartComponent implements OnInit {
  @Input() data: any;
  @Input() layout: any;
  @Input() options: any;
  @ViewChild("plotly") plotly;

  constructor() {}

  ngOnInit() {
    Plotly.newPlot(
      this.plotly.nativeElement,
      this.data,
      this.layout,
      this.options
    );
  }
}

[saaniaki]

I'm using Angular 6 at the moment and I have problem with @type files (i.e. index.d.ts). The project complies fine and and everything is working but my IDE, which is Intellij WebStorm is not fully functioning.

I did what @szechyjs said but WebStorm is only suggesting the name of the functions and not providing any details. For example, for newPlot() function it only shows:
newPlot(tsconfig$roots) . . . . main.newPlot
in the popup menu.

In addition, I checked and I can not simply "ctrl + click" on the name of function or other imports like "Data" or "Layout" to go to the index.d.ts file.

What I did was to play with tsconfig.app.jason file and I changed the "paths" variable from:
"paths": { "plotly.js": [ "../node_modules/plotly.js/dist/plotly.js" ] }
to
"paths": { "Plotly": [ "../node_modules/plotly.js/dist/plotly.js" ] }
and suddenly WebStorm started to work! However, as you can guess, the project couldn't be compiled successfully anymore :(

Any suggestion to make Angular 6 to work with the new typing files?

[etpinard]

@saaniaki have you seen https://github.com/plotly/angular-plotly.js ?

[amellnik]

I think this can be closed.