Separated bundle

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],
     ...

src/app/demo/demo.module.ts

@@ -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/plotly-via-cdn/plotly-via-cdn.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/plotly.module.spec.ts

@@ -0,0 +1,25 @@
+import { PlotlyModule } from "./plotly.module";
+
+
+
+describe('PlotlyModule', () => {
+
+    it('should create', () => {
+        const fn = () => {
+            const mod = new PlotlyModule();
+        };
+
+        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.";
+        expect(fn).toThrowError(msg);
+
+
+        const fn2 = () => {
+            PlotlyModule.plotlyjs = {plot: function() { }};
+            const mod = new PlotlyModule();
+        };
+
+        expect(fn2).not.toThrowError(msg);
+    });
+
+});

src/app/plotly/plotly.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';
     }
 }

src/app/shared/plot/plot.component.spec.ts

@@ -141,6 +141,17 @@ describe('PlotComponent', () => {
         }, 13);
     });
 
+    it('should fail when plotlyInstance is undefined', () => {
+        component.plotlyInstance = undefined;
+
+        const error = new Error(`Plotly component wasn't initialized`);
+        const fn = () => {
+            component.updatePlot();
+        };
+
+        expect(fn).toThrow(error);
+    });
+
     it('should add handler into window.resize when useResizeHandler=true', () => {
         spyOn(component, 'getWindow').and.callFake(() => windowSpy);