plotly.js always gets bundled

[Onmar]

Expected Behavior

Plotly.js does not get bundled into the production build if you are using either the PlotlyViaCDNModule or the PlotlyViaWindowModule.

Actual Behavior

Plotly.js always gets bundled into the chunk the module is imported in (usually main).
This only happens if you install angular-plotly via npm, but not with the source project.

Steps to Reproduce the Problem

1. Make a new angular project with angular-plotly.js and plotly.js (like described in the README.md)
2. Add either of the two modules to the app.module.ts (like described in the README.md)
3. Create a production build with ng build --prod
   You will notice that plotly.js will be bundled into the main.<hash>.js bundle (file size ~3MB)

Specifications

• Version: 1.1.0

Other Notes

As mentioned above this only happens if you install angular-plotly.js via npm.
If you download the sources (plotly-via-cdn.module.ts and the shared/ folder) and add them manually everything works as intended.
I don't know enough about npm-packages, but it seems that bundling makes it so all Modules are imported into the application as soon as you import one.

[andrefarzat]

Hi, @Onmar
this is exactly the correct behaviour for these two modules. The regular module PlotlyModule loads (and bundles) the plotly.js library from the local npm installation (e.g.: node_modules). But this is an issue for several other developers because of the final bundle size. To avoid not having the plotly.js bundled into the final code, we have these two other modules to automatically load from a CDN (PlotlyViaCDNModule) or checking the window.Plotly object (PlotlyViaWindowModule) where we suppose the developer has already included plotly.js somehow (e.g.: via <script> tag or adding it as externals on angular ploject).

With that being said, I believe the misunderstanding is because angular does the tree-shaking and remove the code only when we build for--prod. This means that during development, you might get plotly.js bundled because the typescript compiler will assemble everything (including PlotlyViaCDNModule which brings plotly.js with it ) even though not all code is used.

Hope I have clarified. I am going to close this issue, but feel free to reopen if you still in doubt 😸

[Onmar]

It still gets bundled for me even when I build it for --prod if I use either the PlotlyViaCDNModule of the PlotlyViaWindowModule.
Here is the output for my test-project on the newest version of angular/npm:

$ ng build --prod
                                                                                 
Date: 2019-03-18T08:23:01.536Z
Hash: 8d650c07e9f833882714
Time: 185868ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} es2015-polyfills.c5dd28b362270c767b34.js (es2015-polyfills) 56.4 kB [initial] [rendered]
chunk {2} main.4ab8b9718a1a5ddcab96.js (main) 2.99 MB [initial] [rendered]
chunk {3} polyfills.8bbb231b43165d65d357.js (polyfills) 41 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

This is with the PlotlyViaCDNModule.

[orangeswim]

I'm trying to figure out how not to get plotly.js bundled as well.

[orangeswim]

I uninstalled plotly.js to see where it is being called and ran ng build and the error is ERROR in ./node_modules/angular-plotly.js/fesm5/angular-plotly.js.js Module not found: Error: Can't resolve 'plotly.js/dist/plotly.js' in 'E:\Docker\ngxp\src\budgetRoad\node_modules\angular-plotly.js\fesm5'

I'm assuming it should be pointed at the plotly.min.js. I'll look into it some more..

Update: /fesm5/angular-plotly.js.js imports 'plotly.js/dist/plotly.js' and PlotlyViaWindowModule is defined in the same file.
Compared to /esm5/src/app/plotly-via-window/ where PlotlyViaWindowModule does not import plotly.js

[orangeswim]

this is more of a band-aid fix.

go to node_modules\angular-plotly.js\bundles\angular-plotly.js.umd.js and remove references to Plotly
From:
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('plotly.js/dist/plotly.js'), require('@angular/core'), require('@angular/common')) : typeof define === 'function' && define.amd ? define('angular-plotly.js', ['exports', 'plotly.js/dist/plotly.js', '@angular/core', '@angular/common'], factory) : (factory((global['angular-plotly'] = global['angular-plotly'] || {}, global['angular-plotly'].js = {}),global.PlotlyJS,global.ng.core,global.ng.common)); }(this, (function (exports,PlotlyJS,i0,common) { 'use strict';

to

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) : typeof define === 'function' && define.amd ? define('angular-plotly.js', ['exports','@angular/core', '@angular/common'], factory) : (factory((global['angular-plotly'] = global['angular-plotly'] || {}, global['angular-plotly'].js = {}),global.ng.core,global.ng.common)); }(this, (function (exports,i0,common) { 'use strict';

then in node_modules\angular-plotly.js\package.json , delete the fesm5 and fesm2015 folders. Confirmed with webpack bundle analyzer that plotly.js is not bundled anymore.
I'm not sure the root cause of this actual issue...but this will let me continue developing without slowing down the build process.

[Onmar]

Just fyi as a bandaid fix you can download the following source files and add them manually:

src/app/plotly-via-window/plotly-via-window.module.ts
src/app/plotly-via-cdn/plotly-via-cdn.module.ts
src/app/shared/* (all files)

That should work when building with --prod

[andrefarzat]

@Onmar @orangeswim I've been studying both angular CLI and ng-packagr to see how we could separate plotly.js and angular-plotly.js using the tree-shaking. The main issue is how angular asks us to publish the libraries: https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit

To sum up: if we use the typescript directly, everything works as expected. The issue happens when we install via npm and gets only the javascript version of the code. The plotly.js is imported anyhow in that final bundle. To avoid this, I separated plotly.js from angular-plotly.js code. It's included only on the tests. But for this to work, I needed to change how PlotlyModule is imported. The difference is this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import * as PlotlyJS from 'plotly.js/dist/plotly.js';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS; // <- The user will have to add the PlotlyJS manually *sad*

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

Please, see the pull request and let me know what you guys think about: #51
What you guys think ? If you are ok with it, I will publish as version 1.2.0 and update the docs.

Thank you

[Onmar]

It's unfortunate that apparently you can't separate it completely.
Though if you do it like you suggest you do have the advantage of being able to load a different dist than the default one with the PlotlyModule, e.g. like this:

import * as PlotlyBasicJS from 'plotly.js/dist/plotly-basic.js';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyBasicJS;

(At least I think this should work, but I have not tried it)

Still, it makes it less intuitive to add to a project.

Personally I feel like there has to be a way to separate plotly.js from the main bundle, the 3MB is just too much. Your way has the additional advantage mentioned above, so I'm pretty happy with this solution.

Thank you for your work.

[andrefarzat]

@Onmar I am happy that you like my suggestion. And you're right! It's possible to use any plotly.js bundle, including the 'plotly.js/dist/plotly.min.js' !
I will update the docs with this idea and terminate the merge request.
Thank you! 😸