Quickfix on PlotlyViaCDNModule

Author: andrefarzat

src/app/demo/demo.module.ts

@@ -8,8 +8,8 @@ import * as PlotlyJS from 'plotly.js/dist/plotly.js';
 import { HomeComponent } from './home/home.component';
 import { DemoComponent } from './demo.component';
 
-import { PlotlyModule } from '../plotly/plotly.module';
-// import { PlotlyViaCDNModule } from '../plotly-via-cdn/plotly-via-cdn.module';
+// import { PlotlyModule } from '../plotly/plotly.module';
+import { PlotlyViaCDNModule } from '../plotly-via-cdn/plotly-via-cdn.module';
 // import { PlotlyViaWindowModule } from '../plotly-via-window/plotly-via-window.module';
 
 // Examples
@@ -38,15 +38,16 @@ const demoRoutes: Routes = [
 ];
 
 
-PlotlyModule.plotlyjs = PlotlyJS;
-// PlotlyViaCDNModule.plotlyVersion = 'latest';
+// PlotlyModule.plotlyjs = PlotlyJS;
+PlotlyViaCDNModule.plotlyVersion = '1.5.0';
+// PlotlyViaCDNModule.plotlyBundle = 'cartesian';
 
 @NgModule({
     imports: [
         CommonModule,
         HttpClientModule,
-        PlotlyModule,
-        // PlotlyViaCDNModule,
+        // PlotlyModule,
+        PlotlyViaCDNModule,
         // PlotlyViaWindowModule,
         RouterModule.forRoot(demoRoutes, { enableTracing: true }),
     ],

src/app/plotly-via-cdn/plotly-via-cdn.module.ts

@@ -18,12 +18,17 @@ export class PlotlyViaCDNModule {
     private static _plotlyVersion: string = 'latest';
     static plotlyBundleNames: PlotlyBundleName[] = ['basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox', 'finance'];
 
+    constructor(public plotlyService: PlotlyService) {
+        PlotlyService.setModuleName('ViaCDN');
+    }
+
     static set plotlyVersion(version: string) {
         const isOk = version === 'latest' || /^\d\.\d{1,2}\.\d{1,2}$/.test(version);
         if (!isOk) {
             throw new Error(`Invalid plotly version. Please set 'latest' or version number (i.e.: 1.4.3)`);
         }
 
+        PlotlyViaCDNModule.loadViaCDN();
         PlotlyViaCDNModule._plotlyVersion = version;
     }
 
@@ -39,33 +44,38 @@ export class PlotlyViaCDNModule {
 
     static loadViaCDN() {
         PlotlyService.setPlotly('waiting');
-        const src = PlotlyViaCDNModule._plotlyBundle == null
-            ? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyVersion}.min.js`
-            : `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyBundle}-${PlotlyViaCDNModule._plotlyBundle}.min.js`;
-
-        const script: HTMLScriptElement = document.createElement('script');
-        script.type = 'text/javascript';
-        script.src = src;
-        script.onerror = () => console.error(`Error loading plotly.js library from ${src}`);
-
-        const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
-        head.appendChild(script);
-
-        let counter = 200; // equivalent of 10 seconds...
-
-        const fn = () => {
-            const plotly = (window as any).Plotly;
-            if (plotly) {
-                PlotlyService.setPlotly(plotly);
-            } else if (counter > 0) {
-                counter --;
-                setTimeout(fn, 50);
-            } else {
-                throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
-            }
+
+        const init = () => {
+            const src = PlotlyViaCDNModule._plotlyBundle == null
+                ? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyVersion}.min.js`
+                : `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyBundle}-${PlotlyViaCDNModule._plotlyVersion}.min.js`;
+
+            const script: HTMLScriptElement = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = src;
+            script.onerror = () => console.error(`Error loading plotly.js library from ${src}`);
+
+            const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
+            head.appendChild(script);
+
+            let counter = 200; // equivalent of 10 seconds...
+
+            const fn = () => {
+                const plotly = (window as any).Plotly;
+                if (plotly) {
+                    PlotlyService.setPlotly(plotly);
+                } else if (counter > 0) {
+                    counter --;
+                    setTimeout(fn, 50);
+                } else {
+                    throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
+                }
+            };
+
+            fn();
         };
 
-        fn();
+        setTimeout(init);
     }
 
     static forRoot(config: Partial<{version: string}>): never {

src/app/shared/plotly.service.ts

@@ -1,13 +1,20 @@
 import { Injectable } from '@angular/core';
 import { Plotly } from './plotly.interface';
 
+type PlotlyName = 'Plotly' | 'ViaCDN' | 'ViaWindow';
+
 
 @Injectable({
     providedIn: 'root'
 })
 export class PlotlyService {
     protected static instances: Plotly.PlotlyHTMLElement[] = [];
     protected static _plotly?: any = undefined;
+    protected static _moduleName?: PlotlyName;
+
+    public static setModuleName(moduleName: PlotlyName) {
+        PlotlyService._moduleName = moduleName;
+    }
 
     public static setPlotly(plotly: any) {
         PlotlyService._plotly = plotly;
@@ -40,7 +47,11 @@ export class PlotlyService {
 
     public getPlotly() {
         if (typeof PlotlyService._plotly === 'undefined') {
-            throw new Error(`Peer dependency plotly.js isn't installed`);
+            const msg = PlotlyService._moduleName === 'ViaCDN'
+                ? `Error loading Peer dependency plotly.js from CDN url`
+                : `Peer dependency plotly.js isn't installed`;
+
+            throw new Error(msg);
         }
 
         return PlotlyService._plotly;