Creating the 'plotlyjs' property on PlotlyModule

Author: andrefarzat

README.md

@@ -43,8 +43,11 @@ Add the `PlotlyModule` into the main app module of your project
 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;
+
 @NgModule({
     imports: [CommonModule, PlotlyModule],
     ...

package-lock.json

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, Routes } from '@angular/router';
 
+import * as PlotlyJS from 'plotly.js/dist/plotly.js';
+
 import { HomeComponent } from './home/home.component';
 import { DemoComponent } from './demo.component';
 
@@ -33,12 +35,16 @@ const demoRoutes: Routes = [
     { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
 
+
+PlotlyModule.plotlyjs = PlotlyJS;
+// PlotlyViaCDNModule.plotlyVersion = 'latest';
+
 @NgModule({
     imports: [
         CommonModule,
         HttpClientModule,
         PlotlyModule,
-        // PlotlyViaCDNModule.forRoot({version: 'latest'}),
+        // PlotlyViaCDNModule,
         // PlotlyViaWindowModule,
         RouterModule.forRoot(demoRoutes, { enableTracing: true }),
     ],

src/app/demo/demo.module.ts

@@ -51,7 +51,7 @@ export class PlotlyViaCDNModule {
         fn();
     }
 
-    static forRoot(config: Partial<{version: string}>): ModuleWithProviders {
+    static forRoot(config: Partial<{version: string}>): ModuleWithProviders<PlotlyViaCDNModule> {
         if (config.version === undefined) {
             console.warn(`It's strongly recommended that you set a plotly version when using via CDN.`);
             config.version = 'latest';

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

@@ -1,8 +1,6 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import * as PlotlyJS from 'plotly.js/dist/plotly.js';
-
 import { PlotComponent } from '../shared/plot/plot.component';
 import { PlotlyService } from '../shared/plotly.service';
 import { SharedModule } from '../shared/shared.module';
@@ -14,14 +12,20 @@ import { SharedModule } from '../shared/shared.module';
     exports: [PlotComponent]
 })
 export class PlotlyModule {
+    public static plotlyjs: any;
+
     constructor() {
-        PlotlyService.setPlotly(PlotlyJS);
+        if (!this.isValid()) {
+            const msg = "Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start"
+                      + " to see how to add PlotlyJS to your project.";
+            throw new Error(msg);
+        }
+
+        PlotlyService.setPlotly(PlotlyModule.plotlyjs);
     }
 
-    static forRoot(): ModuleWithProviders {
-        return {
-            ngModule: PlotlyModule,
-            providers: [PlotlyService]
-        };
+    private isValid(): boolean {
+        return PlotlyModule.plotlyjs !== undefined
+            && typeof PlotlyModule.plotlyjs.plot === 'function';
     }
 }