werks here

src/frontend/dashboard/package-lock.json

@@ -2650,9 +2650,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.211",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.211.tgz",
-      "integrity": "sha512-GZAiK3oHrs0K+LwH+HD+bdjZ17v40oQQdXbbd3dgrwgbENvazrGpcuIADSAREWnxzo9gADB1evuizrbXsnoU2Q==",
+      "version": "1.3.212",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.212.tgz",
+      "integrity": "sha512-H8z5Smi1s1u1zGegEBfbxUAzrxyk1JoRHHHrlNGfhxv3sTb+p/Jz7JDvrR4196Q/Ip8r4+XwWcLvKrUjFKoJAg==",
       "dev": true
     },
     "elliptic": {

src/frontend/dashboard/src/app/dashboard/dashboard.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+declare const fb
+
+@Injectable()
+export class DashboardService {
+  constructor() { }
+
+  getWidgetConfigs(): Promise<string[]> {
+    return fb.PluginManager.getLoadedPluginNames()
+  }
+
+}

src/frontend/dashboard/src/app/dashboard/dashboard/dashboard.component.ts

@@ -27,7 +27,6 @@ SystemJS.config({ meta: { '*': { authorization: true } } });
 
 import { AfterViewInit, Component, Compiler, Injector, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { DashboardService } from '../dashboard.service';
-import { WidgetConfig } from '../widget-config.model';
 
 @Component({
   selector: 'app-dashboard',
@@ -42,29 +41,32 @@ export class DashboardComponent implements AfterViewInit {
     private injector: Injector) { }
 
   ngAfterViewInit() {
-    this.loadWidgets();
+    setTimeout( () => {
+      this.loadWidgets();
+    }, 250)
   }
 
   private async loadWidgets() {
-    const widgets = await this.dashboardService.getWidgetConfigs().toPromise();
+    const widgets = await this.dashboardService.getWidgetConfigs()
     widgets.forEach((widget) => this.createWidget(widget));
   }
 
-  private async createWidget(widget: WidgetConfig) {
+  private async createWidget(pluginName: string) {
     // import external module bundle
-    console.log(`Importing module bundle: ${widget.moduleBundlePath}`);
-    const module = await SystemJS.import(widget.moduleBundlePath);
 
+    const module = await SystemJS.import("plugins/"+pluginName+".js");
+
+    console.log(module)
     // compile module
-    const moduleFactory = await this.compiler.compileModuleAsync(module[widget.moduleName]);
+    const moduleFactory = await this.compiler.compileModuleAsync(module["PluginModule"]);
 
     // resolve component factory
     const moduleRef = moduleFactory.create(this.injector);
-    const componentProvider = moduleRef.injector.get(widget.name);
+    const componentProvider = moduleRef.injector.get("provider");
     const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(componentProvider);
 
     // compile component
-    console.log(`Creating widget: ${widget.name}`);
+    console.log(`Creating widget: ${pluginName}`);
     this.content.createComponent(componentFactory);
   }
 

src/frontend/karma.conf.js

@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};

src/frontend/protractor.conf.js

@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

src/frontend/src/app/dashboard/dashboard.service.ts

@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
-import { WidgetConfig } from './widget-config.model';
-
-@Injectable()
-export class DashboardService {
-
-  constructor(private http: HttpClient) { }
-
-  private readonly url = 'widgets-repo/widgets.config.json';
-
-  getWidgetConfigs(): Observable<WidgetConfig[]> {
-    return this.http.get<WidgetConfig[]>(this.url);
-  }
-
-}

src/frontend/src/typings.d.ts

@@ -1,5 +0,0 @@
-/* SystemJS module definition */
-declare var module: NodeModule;
-interface NodeModule {
-  id: string;
-}

src/frontend/widget/main.ts

@@ -0,0 +1 @@
+export { PluginModule } from './widget/module';

src/frontend/widget/widget/a-nested.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'exclamations',
+  template: `
+  <span style="color: blue">!!!</span>
+  `
+})
+export class ANestedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/widget/widget/component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+declare const fb
+@Component({
+  selector: 'APICLIENT', //!!!!
+  template: `
+  <div class="card">
+    <div class="card-block">
+      <div class="card-title">
+        APICLIENT ${Object.keys(fb.ApiClient).join("<br>")}
+      </div>
+      <div class="card-text">
+        Hello World <exclamations></exclamations>
+      </div>
+    </div>
+  </div>
+  `
+})
+export class PluginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/widget/widget/module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PluginComponent } from './component';
+import { ANestedComponent } from './a-nested.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [
+    PluginComponent,
+    ANestedComponent
+  ],
+  entryComponents: [PluginComponent],
+  providers: [{
+    provide: 'provider',
+    useValue: PluginComponent
+  }]
+})
+export class PluginModule { }