Improve dynamic widgets loading.

@@ -24,7 +24,11 @@
             "tsConfig": "src/tsconfig.app.json",
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
             "assets": [
               "src/thingsboard.ico",
               "src/thingsboard.ico",
-              "src/assets"
+              "src/assets",
+              { "glob": "worker-html.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" },
+              { "glob": "worker-css.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" },
+              { "glob": "worker-json.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" },
+              { "glob": "worker-javascript.js", "input": "./node_modules/ace-builds/src-min/", "output": "/" }
             ],
             ],
             "styles": [
             "styles": [
               "src/styles.scss"
               "src/styles.scss"
@@ -49,11 +53,7 @@
               "node_modules/ace-builds/src-min/snippets/css.js",
               "node_modules/ace-builds/src-min/snippets/css.js",
               "node_modules/ace-builds/src-min/snippets/json.js",
               "node_modules/ace-builds/src-min/snippets/json.js",
               "node_modules/ace-builds/src-min/snippets/java.js",
               "node_modules/ace-builds/src-min/snippets/java.js",
-              "node_modules/ace-builds/src-min/snippets/javascript.js",
-              { "bundleName": "worker-html", "input": "node_modules/ace-builds/src-min/worker-html.js" },
-              { "bundleName": "worker-css", "input": "node_modules/ace-builds/src-min/worker-css.js" },
-              { "bundleName": "worker-json", "input": "node_modules/ace-builds/src-min/worker-json.js" },
-              { "bundleName": "worker-javascript", "input": "node_modules/ace-builds/src-min/worker-javascript.js" }
+              "node_modules/ace-builds/src-min/snippets/javascript.js"
             ],
             ],
             "es5BrowserSupport": true,
             "es5BrowserSupport": true,
             "customWebpackConfig": {
             "customWebpackConfig": {

@@ -34,7 +34,7 @@ module.exports = {
     new CompressionPlugin({
     new CompressionPlugin({
       filename: "[path].gz[query]",
       filename: "[path].gz[query]",
       algorithm: "gzip",
       algorithm: "gzip",
-      test: /\.js$|\.css$|\.svg$|\.ttf$|\.woff$|\.woff2$|\.eot$|\.json$/,
+      test: /\.js$|\.css$|\.html$|\.svg?.+$|\.jpg$|\.ttf?.+$|\.woff?.+$|\.eot?.+$|\.json$/,
       threshold: 10240,
       threshold: 10240,
       minRatio: 0.8,
       minRatio: 0.8,
       deleteOriginalAssets: false
       deleteOriginalAssets: false

@@ -14,47 +14,29 @@
 /// limitations under the License.
 /// limitations under the License.
 ///
 ///
 
 
-import {Injectable} from '@angular/core';
-import {defaultHttpOptions} from './http-utils';
-import { Observable, ReplaySubject, Subject, of, forkJoin, throwError } from 'rxjs/index';
-import {HttpClient} from '@angular/common/http';
-import {PageLink} from '@shared/models/page/page-link';
-import {PageData} from '@shared/models/page/page-data';
-import {WidgetsBundle} from '@shared/models/widgets-bundle.model';
-import {
-  WidgetControllerDescriptor,
-  WidgetInfo,
-  WidgetType,
-  WidgetTypeInstance,
-  widgetActionSources,
-  MissingWidgetType, toWidgetInfo, ErrorWidgetType
-} from '@shared/models/widget.models';
+import { Injectable } from '@angular/core';
+import { defaultHttpOptions } from './http-utils';
+import { Observable } from 'rxjs/index';
+import { HttpClient } from '@angular/common/http';
+import { PageLink } from '@shared/models/page/page-link';
+import { PageData } from '@shared/models/page/page-data';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
+import { WidgetType } from '@shared/models/widget.models';
 import { UtilsService } from '@core/services/utils.service';
 import { UtilsService } from '@core/services/utils.service';
-import { isFunction, isUndefined } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AuthPayload } from '@core/auth/auth.models';
-import cssjs from '@core/css/css';
 import { ResourcesService } from '../services/resources.service';
 import { ResourcesService } from '../services/resources.service';
-import { catchError, map, switchMap } from 'rxjs/operators';
 
 
 @Injectable({
 @Injectable({
   providedIn: 'root'
   providedIn: 'root'
 })
 })
 export class WidgetService {
 export class WidgetService {
 
 
-  private cssParser = new cssjs();
-
-  private widgetsInfoInMemoryCache = new Map<string, WidgetInfo>();
-
-  private widgetsInfoFetchQueue = new Map<string, Array<Subject<WidgetInfo>>>();
-
   constructor(
   constructor(
     private http: HttpClient,
     private http: HttpClient,
     private utils: UtilsService,
     private utils: UtilsService,
     private resources: ResourcesService,
     private resources: ResourcesService,
     private translate: TranslateService
     private translate: TranslateService
   ) {
   ) {
-    this.cssParser.testMode = false;
   }
   }
 
 
   public getWidgetBundles(pageLink: PageLink, ignoreErrors: boolean = false,
   public getWidgetBundles(pageLink: PageLink, ignoreErrors: boolean = false,
@@ -88,261 +70,4 @@ export class WidgetService {
     return this.http.get<WidgetType>(`/api/widgetType?isSystem=${isSystem}&bundleAlias=${bundleAlias}&alias=${widgetTypeAlias}`,
     return this.http.get<WidgetType>(`/api/widgetType?isSystem=${isSystem}&bundleAlias=${bundleAlias}&alias=${widgetTypeAlias}`,
       defaultHttpOptions(ignoreLoading, ignoreErrors));
       defaultHttpOptions(ignoreLoading, ignoreErrors));
   }
   }
-
-  public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable<WidgetInfo> {
-    const widgetInfoSubject = new ReplaySubject<WidgetInfo>();
-    const widgetInfo = this.getWidgetInfoFromCache(bundleAlias, widgetTypeAlias, isSystem);
-    if (widgetInfo) {
-      widgetInfoSubject.next(widgetInfo);
-      widgetInfoSubject.complete();
-    } else {
-      if (this.utils.widgetEditMode) {
-        // TODO:
-      } else {
-        const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
-        let fetchQueue = this.widgetsInfoFetchQueue.get(key);
-        if (fetchQueue) {
-          fetchQueue.push(widgetInfoSubject);
-        } else {
-          fetchQueue = new Array<Subject<WidgetInfo>>();
-          this.widgetsInfoFetchQueue.set(key, fetchQueue);
-          this.getWidgetType(bundleAlias, widgetTypeAlias, isSystem).subscribe(
-            (widgetType) => {
-              this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject);
-            },
-            () => {
-              widgetInfoSubject.next(MissingWidgetType);
-              widgetInfoSubject.complete();
-              this.resolveWidgetsInfoFetchQueue(key, MissingWidgetType);
-            }
-          );
-        }
-      }
-    }
-    return widgetInfoSubject.asObservable();
-  }
-
-  private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject<WidgetInfo>) {
-    const widgetInfo = toWidgetInfo(widgetType);
-    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetInfo.alias, isSystem);
-    this.loadWidgetResources(widgetInfo, bundleAlias, isSystem).subscribe(
-      () => {
-        let widgetControllerDescriptor: WidgetControllerDescriptor = null;
-        try {
-          widgetControllerDescriptor = this.createWidgetControllerDescriptor(widgetInfo, key);
-        } catch (e) {
-          const details = this.utils.parseException(e);
-          const errorMessage = `Failed to compile widget script. \n Error: ${details.message}`;
-          this.processWidgetLoadError([errorMessage], key, widgetInfoSubject);
-        }
-        if (widgetControllerDescriptor) {
-          if (widgetControllerDescriptor.settingsSchema) {
-            widgetInfo.typeSettingsSchema = widgetControllerDescriptor.settingsSchema;
-          }
-          if (widgetControllerDescriptor.dataKeySettingsSchema) {
-            widgetInfo.typeDataKeySettingsSchema = widgetControllerDescriptor.dataKeySettingsSchema;
-          }
-          widgetInfo.typeParameters = widgetControllerDescriptor.typeParameters;
-          widgetInfo.actionSources = widgetControllerDescriptor.actionSources;
-          widgetInfo.widgetTypeFunction = widgetControllerDescriptor.widgetTypeFunction;
-          this.putWidgetInfoToCache(widgetInfo, bundleAlias, widgetInfo.alias, isSystem);
-          if (widgetInfoSubject) {
-            widgetInfoSubject.next(widgetInfo);
-            widgetInfoSubject.complete();
-          }
-          this.resolveWidgetsInfoFetchQueue(key, widgetInfo);
-        }
-      },
-      (errorMessages: string[]) => {
-        this.processWidgetLoadError(errorMessages, key, widgetInfoSubject);
-      }
-    );
-  }
-
-  private loadWidgetResources(widgetInfo: WidgetInfo, bundleAlias: string, isSystem: boolean): Observable<any> {
-    const widgetNamespace = `widget-type-${(isSystem ? 'sys-' : '')}${bundleAlias}-${widgetInfo.alias}`;
-    this.cssParser.cssPreviewNamespace = widgetNamespace;
-    this.cssParser.createStyleElement(widgetNamespace, widgetInfo.templateCss);
-    const resourceTasks: Observable<string>[] = [];
-    if (widgetInfo.resources.length > 0) {
-      widgetInfo.resources.forEach((resource) => {
-        resourceTasks.push(
-          this.resources.loadResource(resource.url).pipe(
-            catchError(e => of(`Failed to load widget resource: '${resource.url}'`))
-          )
-        );
-      });
-      return forkJoin(resourceTasks).pipe(
-        switchMap(msgs => {
-          let errors: string[];
-          if (msgs && msgs.length) {
-            errors = msgs.filter(msg => msg && msg.length > 0);
-          }
-          if (errors && errors.length) {
-            return throwError(errors);
-          } else {
-            return of(null);
-          }
-        }
-      ));
-    } else {
-      return of(null);
-    }
-  }
-
-  private createWidgetControllerDescriptor(widgetInfo: WidgetInfo, name: string): WidgetControllerDescriptor {
-    let widgetTypeFunctionBody = `return function ${name} (ctx) {\n` +
-      '    var self = this;\n' +
-      '    self.ctx = ctx;\n\n'; /*+
-
-         '    self.onInit = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.onDataUpdated = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.useCustomDatasources = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.typeParameters = function() {\n\n' +
-                    return {
-                                useCustomDatasources: false,
-                                maxDatasources: -1, //unlimited
-                                maxDataKeys: -1, //unlimited
-                                dataKeysOptional: false,
-                                stateData: false
-                           };
-         '    }\n\n' +
-
-         '    self.actionSources = function() {\n\n' +
-                    return {
-                                'headerButton': {
-                                   name: 'Header button',
-                                   multiple: true
-                                }
-                            };
-              }\n\n' +
-         '    self.onResize = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.onEditModeChanged = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.onMobileModeChanged = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.getSettingsSchema = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.getDataKeySettingsSchema = function() {\n\n' +
-
-         '    }\n\n' +
-
-         '    self.onDestroy = function() {\n\n' +
-
-         '    }\n\n' +
-         '}';*/
-
-    widgetTypeFunctionBody += widgetInfo.controllerScript;
-    widgetTypeFunctionBody += '\n};\n';
-
-    try {
-
-      const widgetTypeFunction = new Function(widgetTypeFunctionBody);
-      const widgetType = widgetTypeFunction.apply(this);
-      const widgetTypeInstance: WidgetTypeInstance = new widgetType();
-      const result: WidgetControllerDescriptor = {
-        widgetTypeFunction: widgetType
-      };
-      if (isFunction(widgetTypeInstance.getSettingsSchema)) {
-        result.settingsSchema = widgetTypeInstance.getSettingsSchema();
-      }
-      if (isFunction(widgetTypeInstance.getDataKeySettingsSchema)) {
-        result.dataKeySettingsSchema = widgetTypeInstance.getDataKeySettingsSchema();
-      }
-      if (isFunction(widgetTypeInstance.typeParameters)) {
-        result.typeParameters = widgetTypeInstance.typeParameters();
-      } else {
-        result.typeParameters = {};
-      }
-      if (isFunction(widgetTypeInstance.useCustomDatasources)) {
-        result.typeParameters.useCustomDatasources = widgetTypeInstance.useCustomDatasources();
-      } else {
-        result.typeParameters.useCustomDatasources = false;
-      }
-      if (isUndefined(result.typeParameters.maxDatasources)) {
-        result.typeParameters.maxDatasources = -1;
-      }
-      if (isUndefined(result.typeParameters.maxDataKeys)) {
-        result.typeParameters.maxDataKeys = -1;
-      }
-      if (isUndefined(result.typeParameters.dataKeysOptional)) {
-        result.typeParameters.dataKeysOptional = false;
-      }
-      if (isUndefined(result.typeParameters.stateData)) {
-        result.typeParameters.stateData = false;
-      }
-      if (isFunction(widgetTypeInstance.actionSources)) {
-        result.actionSources = widgetTypeInstance.actionSources();
-      } else {
-        result.actionSources = {};
-      }
-      for (const actionSourceId of Object.keys(widgetActionSources)) {
-        result.actionSources[actionSourceId] = {...widgetActionSources[actionSourceId]};
-        result.actionSources[actionSourceId].name = this.translate.instant(result.actionSources[actionSourceId].name);
-      }
-      return result;
-    } catch (e) {
-      this.utils.processWidgetException(e);
-      throw e;
-    }
-  }
-
-  private processWidgetLoadError(errorMessages: string[], cacheKey: string, widgetInfoSubject: Subject<WidgetInfo>) {
-    const widgetInfo = {...ErrorWidgetType};
-    errorMessages.forEach(error => {
-      widgetInfo.templateHtml += `<div class="tb-widget-error-msg">${error}</div>`;
-    });
-    widgetInfo.templateHtml += '</div>';
-    if (widgetInfoSubject) {
-      widgetInfoSubject.next(widgetInfo);
-      widgetInfoSubject.complete();
-    }
-    this.resolveWidgetsInfoFetchQueue(cacheKey, widgetInfo);
-  }
-
-  private resolveWidgetsInfoFetchQueue(key: string, widgetInfo: WidgetInfo) {
-    const fetchQueue = this.widgetsInfoFetchQueue.get(key);
-    if (fetchQueue) {
-      fetchQueue.forEach(subject => {
-        subject.next(widgetInfo);
-        subject.complete();
-      });
-      this.widgetsInfoFetchQueue.delete(key);
-    }
-  }
-
-  // Cache functions
-
-  private createWidgetInfoCacheKey(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): string {
-    return `${isSystem ? 'sys_' : ''}${bundleAlias}_${widgetTypeAlias}`;
-  }
-
-  private getWidgetInfoFromCache(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): WidgetInfo | undefined {
-    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
-    return this.widgetsInfoInMemoryCache.get(key);
-  }
-
-  private putWidgetInfoToCache(widgetInfo: WidgetInfo, bundleAlias: string, widgetTypeAlias: string, isSystem: boolean) {
-    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
-    this.widgetsInfoInMemoryCache.set(key, widgetInfo);
-  }
-
 }
 }

@@ -22,63 +22,79 @@ import {
   Injector,
   Injector,
   NgModule,
   NgModule,
   NgModuleRef,
   NgModuleRef,
-  Type,
-  ViewEncapsulation
+  OnDestroy,
+  Type
 } from '@angular/core';
 } from '@angular/core';
-import {
-  DynamicWidgetComponent,
-  DynamicWidgetComponentModule
-} from '@home/components/widget/dynamic-widget.component';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
 import { Observable, ReplaySubject } from 'rxjs';
 import { Observable, ReplaySubject } from 'rxjs';
-import { HomeComponentsModule } from '../home-components.module';
-import { WidgetComponentsModule } from './widget-components.module';
+import { CommonModule } from '@angular/common';
+
+export abstract class DynamicComponentModule implements OnDestroy {
+
+  ngOnDestroy(): void {
+    console.log('Module destroyed!');
+  }
 
 
-interface DynamicWidgetComponentModuleData {
-  moduleRef: NgModuleRef<DynamicWidgetComponentModule>;
-  moduleType: Type<DynamicWidgetComponentModule>;
 }
 }
 
 
-@Injectable()
-export class DynamicWidgetComponentFactoryService {
+interface DynamicComponentModuleData {
+  moduleRef: NgModuleRef<DynamicComponentModule>;
+  moduleType: Type<DynamicComponentModule>;
+}
 
 
-  private dynamicComponentModulesMap = new Map<ComponentFactory<DynamicWidgetComponent>, DynamicWidgetComponentModuleData>();
+@Injectable(
+  {
+    providedIn: 'root'
+  }
+)
+export class DynamicComponentFactoryService {
+
+  private dynamicComponentModulesMap = new Map<ComponentFactory<any>, DynamicComponentModuleData>();
 
 
   constructor(private compiler: Compiler,
   constructor(private compiler: Compiler,
               private injector: Injector) {
               private injector: Injector) {
   }
   }
 
 
-  public createDynamicWidgetComponentFactory(template: string): Observable<ComponentFactory<DynamicWidgetComponent>> {
-    const dymamicWidgetComponentFactorySubject = new ReplaySubject<ComponentFactory<DynamicWidgetComponent>>();
-    const comp = this.createDynamicWidgetComponent(template);
+  public createDynamicComponentFactory<T>(
+                     componentType: Type<T>,
+                     template: string,
+                     modules?: Type<any>[]): Observable<ComponentFactory<T>> {
+    const dymamicComponentFactorySubject = new ReplaySubject<ComponentFactory<T>>();
+    const comp = this.createDynamicComponent(componentType, template);
+    let moduleImports = [CommonModule];
+    if (modules) {
+      moduleImports = [...moduleImports, ...modules];
+    }
     // noinspection AngularInvalidImportedOrDeclaredSymbol,AngularInvalidEntryComponent
     // noinspection AngularInvalidImportedOrDeclaredSymbol,AngularInvalidEntryComponent
     @NgModule({
     @NgModule({
       declarations: [comp],
       declarations: [comp],
       entryComponents: [comp],
       entryComponents: [comp],
-      imports: [CommonModule, SharedModule, WidgetComponentsModule],
+      imports: moduleImports
     })
     })
-    class DynamicWidgetComponentInstanceModule extends DynamicWidgetComponentModule {}
-    this.compiler.compileModuleAsync(DynamicWidgetComponentInstanceModule).then(
-      (module) => {
-        const moduleRef = module.create(this.injector);
-        const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(comp);
-        this.dynamicComponentModulesMap.set(factory, {
-          moduleRef,
-          moduleType: module.moduleType
-        });
-        dymamicWidgetComponentFactorySubject.next(factory);
-        dymamicWidgetComponentFactorySubject.complete();
-      }
-    ).catch(
-      (e) => {
-        dymamicWidgetComponentFactorySubject.error(`Failed to create dynamic widget component factory: ${e}`);
-      }
-    );
-    return dymamicWidgetComponentFactorySubject.asObservable();
+    class DynamicComponentInstanceModule extends DynamicComponentModule {}
+    try {
+      this.compiler.compileModuleAsync(DynamicComponentInstanceModule).then(
+        (module) => {
+          const moduleRef = module.create(this.injector);
+          const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(comp);
+          this.dynamicComponentModulesMap.set(factory, {
+            moduleRef,
+            moduleType: module.moduleType
+          });
+          dymamicComponentFactorySubject.next(factory);
+          dymamicComponentFactorySubject.complete();
+        }
+      ).catch(
+        (e) => {
+          dymamicComponentFactorySubject.error(e);
+        }
+      );
+    } catch (e) {
+      dymamicComponentFactorySubject.error(e);
+    }
+    return dymamicComponentFactorySubject.asObservable();
   }
   }
 
 
-  public destroyDynamicWidgetComponentFactory(factory: ComponentFactory<DynamicWidgetComponent>) {
+  public destroyDynamicComponentFactory<T>(factory: ComponentFactory<T>) {
     const moduleData = this.dynamicComponentModulesMap.get(factory);
     const moduleData = this.dynamicComponentModulesMap.get(factory);
     if (moduleData) {
     if (moduleData) {
       moduleData.moduleRef.destroy();
       moduleData.moduleRef.destroy();
@@ -87,14 +103,11 @@ export class DynamicWidgetComponentFactoryService {
     }
     }
   }
   }
 
 
-  private createDynamicWidgetComponent(template: string): Type<DynamicWidgetComponent> {
+  private createDynamicComponent<T>(componentType: Type<T>, template: string): Type<T> {
     // noinspection AngularMissingOrInvalidDeclarationInModule
     // noinspection AngularMissingOrInvalidDeclarationInModule
-    @Component({
+    return Component({
       template
       template
-    })
-    class DynamicWidgetInstanceComponent extends DynamicWidgetComponent { }
-
-    return DynamicWidgetInstanceComponent;
+    })(componentType);
   }
   }
 
 
 }
 }

@@ -16,7 +16,6 @@
 
 
 import { Inject, Injectable } from '@angular/core';
 import { Inject, Injectable } from '@angular/core';
 import { WINDOW } from '@core/services/window.service';
 import { WINDOW } from '@core/services/window.service';
-import { WidgetInfo } from '@shared/models/widget.models';
 import { ExceptionData } from '@app/shared/models/error.models';
 import { ExceptionData } from '@app/shared/models/error.models';
 import { isUndefined } from '@core/utils';
 import { isUndefined } from '@core/utils';
 import { WindowMessage } from '@shared/models/window-message.model';
 import { WindowMessage } from '@shared/models/window-message.model';
@@ -30,7 +29,7 @@ export class UtilsService {
 
 
   iframeMode = false;
   iframeMode = false;
   widgetEditMode = false;
   widgetEditMode = false;
-  editWidgetInfo: WidgetInfo = null;
+  editWidgetInfo: any = null;
 
 
   constructor(@Inject(WINDOW) private window: Window,
   constructor(@Inject(WINDOW) private window: Window,
               private translate: TranslateService) {
               private translate: TranslateService) {

@@ -36,7 +36,8 @@ import { AddAttributeDialogComponent } from './attribute/add-attribute-dialog.co
 import { EditAttributeValuePanelComponent } from './attribute/edit-attribute-value-panel.component';
 import { EditAttributeValuePanelComponent } from './attribute/edit-attribute-value-panel.component';
 import { DashboardComponent } from '@home/components/dashboard/dashboard.component';
 import { DashboardComponent } from '@home/components/dashboard/dashboard.component';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { WidgetComponent } from '@home/components/widget/widget.component';
-import { DynamicWidgetComponentFactoryService } from './widget/dynamic-widget-component-factory.service';
+import { WidgetComponentService } from './widget/widget-component.service';
+import { LegendComponent } from '@home/components/widget/legend.component';
 
 
 @NgModule({
 @NgModule({
   entryComponents: [
   entryComponents: [
@@ -69,7 +70,8 @@ import { DynamicWidgetComponentFactoryService } from './widget/dynamic-widget-co
       AddAttributeDialogComponent,
       AddAttributeDialogComponent,
       EditAttributeValuePanelComponent,
       EditAttributeValuePanelComponent,
       DashboardComponent,
       DashboardComponent,
-      WidgetComponent
+      WidgetComponent,
+      LegendComponent
     ],
     ],
   imports: [
   imports: [
     CommonModule,
     CommonModule,
@@ -88,10 +90,11 @@ import { DynamicWidgetComponentFactoryService } from './widget/dynamic-widget-co
     AlarmDetailsDialogComponent,
     AlarmDetailsDialogComponent,
     AttributeTableComponent,
     AttributeTableComponent,
     DashboardComponent,
     DashboardComponent,
-    WidgetComponent
+    WidgetComponent,
+    LegendComponent
   ],
   ],
   providers: [
   providers: [
-    DynamicWidgetComponentFactoryService
+    WidgetComponentService
   ]
   ]
 })
 })
 export class HomeComponentsModule { }
 export class HomeComponentsModule { }

@@ -21,24 +21,13 @@ import { AppState } from '@core/core.state';
 import { WidgetContext, IDynamicWidgetComponent } from '@home/models/widget-component.models';
 import { WidgetContext, IDynamicWidgetComponent } from '@home/models/widget-component.models';
 import { ExceptionData } from '@shared/models/error.models';
 import { ExceptionData } from '@shared/models/error.models';
 
 
-export abstract class DynamicWidgetComponentModule implements OnDestroy {
-
-  ngOnDestroy(): void {
-    console.log('Module destroyed!');
-  }
-
-}
-
-export abstract class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy {
+export class DynamicWidgetComponent extends PageComponent implements IDynamicWidgetComponent, OnInit, OnDestroy {
 
 
   @Input()
   @Input()
   widgetContext: WidgetContext;
   widgetContext: WidgetContext;
 
 
   @Input()
   @Input()
-  widgetErrorData: ExceptionData;
-
-  @Input()
-  loadingData: boolean;
+  errorMessages: string[];
 
 
   [key: string]: any;
   [key: string]: any;
 
 
@@ -51,7 +40,7 @@ export abstract class DynamicWidgetComponent extends PageComponent implements ID
   }
   }
 
 
   ngOnDestroy(): void {
   ngOnDestroy(): void {
-    console.log('Component destroyed!');
+    console.log('Widget component destroyed!');
   }
   }
 
 
   clearRpcError() {
   clearRpcError() {

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Injectable } from '@angular/core';
+import { DynamicComponentFactoryService } from '@core/services/dynamic-component-factory.service';
+import { WidgetService } from '@core/http/widget.service';
+import { forkJoin, Observable, of, ReplaySubject, Subject, throwError } from 'rxjs';
+import { WidgetInfo, MissingWidgetType, toWidgetInfo, WidgetTypeInstance, ErrorWidgetType } from '@home/models/widget-component.models';
+import cssjs from '@core/css/css';
+import { UtilsService } from '@core/services/utils.service';
+import { ResourcesService } from '@core/services/resources.service';
+import {
+  widgetActionSources,
+  WidgetControllerDescriptor,
+  WidgetType
+} from '@shared/models/widget.models';
+import { catchError, switchMap, map, mergeMap } from 'rxjs/operators';
+import { isFunction, isUndefined } from '@core/utils';
+import { TranslateService } from '@ngx-translate/core';
+import { DynamicWidgetComponent } from '@home/components/widget/dynamic-widget.component';
+import { SharedModule } from '@shared/shared.module';
+import { WidgetComponentsModule } from '@home/components/widget/widget-components.module';
+
+@Injectable()
+export class WidgetComponentService {
+
+  private cssParser = new cssjs();
+
+  private widgetsInfoInMemoryCache = new Map<string, WidgetInfo>();
+
+  private widgetsInfoFetchQueue = new Map<string, Array<Subject<WidgetInfo>>>();
+
+  private init$: Observable<any>;
+
+  private missingWidgetType: WidgetInfo;
+  private errorWidgetType: WidgetInfo;
+
+  constructor(private dynamicComponentFactoryService: DynamicComponentFactoryService,
+              private widgetService: WidgetService,
+              private utils: UtilsService,
+              private resources: ResourcesService,
+              private translate: TranslateService) {
+    this.cssParser.testMode = false;
+    this.init();
+  }
+
+  private init(): Observable<any> {
+    if (this.init$) {
+      return this.init$;
+    } else {
+      this.missingWidgetType = {...MissingWidgetType};
+      this.errorWidgetType = {...ErrorWidgetType};
+      const initSubject = new ReplaySubject();
+      this.init$ = initSubject.asObservable();
+      const loadDefaultWidgetInfoTasks = [
+        this.loadWidgetResources(this.missingWidgetType, 'global-widget-missing-type'),
+        this.loadWidgetResources(this.errorWidgetType, 'global-widget-error-type'),
+      ];
+      forkJoin(loadDefaultWidgetInfoTasks).subscribe(
+        () => {
+          initSubject.next();
+        },
+        () => {
+          console.error('Failed to load default widget types!');
+          initSubject.error('Failed to load default widget types!');
+        }
+      );
+      return this.init$;
+    }
+  }
+
+  public getWidgetInfo(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable<WidgetInfo> {
+    return this.init().pipe(
+      mergeMap(() => this.getWidgetInfoInternal(bundleAlias, widgetTypeAlias, isSystem))
+    );
+  }
+
+  private getWidgetInfoInternal(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): Observable<WidgetInfo> {
+    const widgetInfoSubject = new ReplaySubject<WidgetInfo>();
+    const widgetInfo = this.getWidgetInfoFromCache(bundleAlias, widgetTypeAlias, isSystem);
+    if (widgetInfo) {
+      widgetInfoSubject.next(widgetInfo);
+      widgetInfoSubject.complete();
+    } else {
+      if (this.utils.widgetEditMode) {
+        // TODO:
+      } else {
+        const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
+        let fetchQueue = this.widgetsInfoFetchQueue.get(key);
+        if (fetchQueue) {
+          fetchQueue.push(widgetInfoSubject);
+        } else {
+          fetchQueue = new Array<Subject<WidgetInfo>>();
+          this.widgetsInfoFetchQueue.set(key, fetchQueue);
+          this.widgetService.getWidgetType(bundleAlias, widgetTypeAlias, isSystem).subscribe(
+            (widgetType) => {
+              this.loadWidget(widgetType, bundleAlias, isSystem, widgetInfoSubject);
+            },
+            () => {
+              widgetInfoSubject.next(this.missingWidgetType);
+              widgetInfoSubject.complete();
+              this.resolveWidgetsInfoFetchQueue(key, this.missingWidgetType);
+            }
+          );
+        }
+      }
+    }
+    return widgetInfoSubject.asObservable();
+  }
+
+  private loadWidget(widgetType: WidgetType, bundleAlias: string, isSystem: boolean, widgetInfoSubject: Subject<WidgetInfo>) {
+    const widgetInfo = toWidgetInfo(widgetType);
+    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetInfo.alias, isSystem);
+    let widgetControllerDescriptor: WidgetControllerDescriptor = null;
+    try {
+      widgetControllerDescriptor = this.createWidgetControllerDescriptor(widgetInfo, key);
+    } catch (e) {
+      const details = this.utils.parseException(e);
+      const errorMessage = `Failed to compile widget script. \n Error: ${details.message}`;
+      this.processWidgetLoadError([errorMessage], key, widgetInfoSubject);
+    }
+    if (widgetControllerDescriptor) {
+      const widgetNamespace = `widget-type-${(isSystem ? 'sys-' : '')}${bundleAlias}-${widgetInfo.alias}`;
+      this.loadWidgetResources(widgetInfo, widgetNamespace).subscribe(
+        () => {
+          if (widgetControllerDescriptor.settingsSchema) {
+            widgetInfo.typeSettingsSchema = widgetControllerDescriptor.settingsSchema;
+          }
+          if (widgetControllerDescriptor.dataKeySettingsSchema) {
+            widgetInfo.typeDataKeySettingsSchema = widgetControllerDescriptor.dataKeySettingsSchema;
+          }
+          widgetInfo.typeParameters = widgetControllerDescriptor.typeParameters;
+          widgetInfo.actionSources = widgetControllerDescriptor.actionSources;
+          widgetInfo.widgetTypeFunction = widgetControllerDescriptor.widgetTypeFunction;
+          this.putWidgetInfoToCache(widgetInfo, bundleAlias, widgetInfo.alias, isSystem);
+          if (widgetInfoSubject) {
+            widgetInfoSubject.next(widgetInfo);
+            widgetInfoSubject.complete();
+          }
+          this.resolveWidgetsInfoFetchQueue(key, widgetInfo);
+        },
+        (errorMessages: string[]) => {
+          this.processWidgetLoadError(errorMessages, key, widgetInfoSubject);
+        }
+      );
+    }
+  }
+
+  private loadWidgetResources(widgetInfo: WidgetInfo, widgetNamespace: string): Observable<any> {
+    this.cssParser.cssPreviewNamespace = widgetNamespace;
+    this.cssParser.createStyleElement(widgetNamespace, widgetInfo.templateCss);
+    const resourceTasks: Observable<string>[] = [];
+    if (widgetInfo.resources.length > 0) {
+      widgetInfo.resources.forEach((resource) => {
+        resourceTasks.push(
+          this.resources.loadResource(resource.url).pipe(
+            catchError(e => of(`Failed to load widget resource: '${resource.url}'`))
+          )
+        );
+      });
+    }
+    resourceTasks.push(
+      this.dynamicComponentFactoryService.createDynamicComponentFactory(
+        class DynamicWidgetComponentInstance extends DynamicWidgetComponent {},
+        widgetInfo.templateHtml,
+        [SharedModule, WidgetComponentsModule]
+      ).pipe(
+        map((factory) => {
+          widgetInfo.componentFactory = factory;
+          return null;
+        }),
+        catchError(e => {
+          const details = this.utils.parseException(e);
+          const errorMessage = `Failed to compile widget html. \n Error: ${details.message}`;
+          return of(errorMessage);
+        })
+      )
+    );
+    return forkJoin(resourceTasks).pipe(
+      switchMap(msgs => {
+          let errors: string[];
+          if (msgs && msgs.length) {
+            errors = msgs.filter(msg => msg && msg.length > 0);
+          }
+          if (errors && errors.length) {
+            return throwError(errors);
+          } else {
+            return of(null);
+          }
+        }
+    ));
+  }
+
+  private createWidgetControllerDescriptor(widgetInfo: WidgetInfo, name: string): WidgetControllerDescriptor {
+    let widgetTypeFunctionBody = `return function ${name} (ctx) {\n` +
+      '    var self = this;\n' +
+      '    self.ctx = ctx;\n\n'; /*+
+
+         '    self.onInit = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.onDataUpdated = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.useCustomDatasources = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.typeParameters = function() {\n\n' +
+                    return {
+                                useCustomDatasources: false,
+                                maxDatasources: -1, //unlimited
+                                maxDataKeys: -1, //unlimited
+                                dataKeysOptional: false,
+                                stateData: false
+                           };
+         '    }\n\n' +
+
+         '    self.actionSources = function() {\n\n' +
+                    return {
+                                'headerButton': {
+                                   name: 'Header button',
+                                   multiple: true
+                                }
+                            };
+              }\n\n' +
+         '    self.onResize = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.onEditModeChanged = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.onMobileModeChanged = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.getSettingsSchema = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.getDataKeySettingsSchema = function() {\n\n' +
+
+         '    }\n\n' +
+
+         '    self.onDestroy = function() {\n\n' +
+
+         '    }\n\n' +
+         '}';*/
+
+    widgetTypeFunctionBody += widgetInfo.controllerScript;
+    widgetTypeFunctionBody += '\n};\n';
+
+    try {
+
+      const widgetTypeFunction = new Function(widgetTypeFunctionBody);
+      const widgetType = widgetTypeFunction.apply(this);
+      const widgetTypeInstance: WidgetTypeInstance = new widgetType();
+      const result: WidgetControllerDescriptor = {
+        widgetTypeFunction: widgetType
+      };
+      if (isFunction(widgetTypeInstance.getSettingsSchema)) {
+        result.settingsSchema = widgetTypeInstance.getSettingsSchema();
+      }
+      if (isFunction(widgetTypeInstance.getDataKeySettingsSchema)) {
+        result.dataKeySettingsSchema = widgetTypeInstance.getDataKeySettingsSchema();
+      }
+      if (isFunction(widgetTypeInstance.typeParameters)) {
+        result.typeParameters = widgetTypeInstance.typeParameters();
+      } else {
+        result.typeParameters = {};
+      }
+      if (isFunction(widgetTypeInstance.useCustomDatasources)) {
+        result.typeParameters.useCustomDatasources = widgetTypeInstance.useCustomDatasources();
+      } else {
+        result.typeParameters.useCustomDatasources = false;
+      }
+      if (isUndefined(result.typeParameters.maxDatasources)) {
+        result.typeParameters.maxDatasources = -1;
+      }
+      if (isUndefined(result.typeParameters.maxDataKeys)) {
+        result.typeParameters.maxDataKeys = -1;
+      }
+      if (isUndefined(result.typeParameters.dataKeysOptional)) {
+        result.typeParameters.dataKeysOptional = false;
+      }
+      if (isUndefined(result.typeParameters.stateData)) {
+        result.typeParameters.stateData = false;
+      }
+      if (isFunction(widgetTypeInstance.actionSources)) {
+        result.actionSources = widgetTypeInstance.actionSources();
+      } else {
+        result.actionSources = {};
+      }
+      for (const actionSourceId of Object.keys(widgetActionSources)) {
+        result.actionSources[actionSourceId] = {...widgetActionSources[actionSourceId]};
+        result.actionSources[actionSourceId].name = this.translate.instant(result.actionSources[actionSourceId].name);
+      }
+      return result;
+    } catch (e) {
+      this.utils.processWidgetException(e);
+      throw e;
+    }
+  }
+
+  private processWidgetLoadError(errorMessages: string[], cacheKey: string, widgetInfoSubject: Subject<WidgetInfo>) {
+    if (widgetInfoSubject) {
+      widgetInfoSubject.error({
+        widgetInfo: this.errorWidgetType,
+        errorMessages
+      });
+    }
+    this.resolveWidgetsInfoFetchQueue(cacheKey, this.errorWidgetType, errorMessages);
+  }
+
+  private resolveWidgetsInfoFetchQueue(key: string, widgetInfo: WidgetInfo, errorMessages?: string[]) {
+    const fetchQueue = this.widgetsInfoFetchQueue.get(key);
+    if (fetchQueue) {
+      fetchQueue.forEach(subject => {
+        if (!errorMessages) {
+          subject.next(widgetInfo);
+          subject.complete();
+        } else {
+          subject.error({
+            widgetInfo,
+            errorMessages
+          });
+        }
+      });
+      this.widgetsInfoFetchQueue.delete(key);
+    }
+  }
+
+  // Cache functions
+
+  private createWidgetInfoCacheKey(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): string {
+    return `${isSystem ? 'sys_' : ''}${bundleAlias}_${widgetTypeAlias}`;
+  }
+
+  private getWidgetInfoFromCache(bundleAlias: string, widgetTypeAlias: string, isSystem: boolean): WidgetInfo | undefined {
+    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
+    return this.widgetsInfoInMemoryCache.get(key);
+  }
+
+  private putWidgetInfoToCache(widgetInfo: WidgetInfo, bundleAlias: string, widgetTypeAlias: string, isSystem: boolean) {
+    const key = this.createWidgetInfoCacheKey(bundleAlias, widgetTypeAlias, isSystem);
+    this.widgetsInfoInMemoryCache.set(key, widgetInfo);
+  }
+
+}

@@ -25,14 +25,12 @@ import { LegendComponent } from '@home/components/widget/legend.component';
   ],
   ],
   declarations:
   declarations:
     [
     [
-      LegendComponent
     ],
     ],
   imports: [
   imports: [
     CommonModule,
     CommonModule,
     SharedModule
     SharedModule
   ],
   ],
   exports: [
   exports: [
-    LegendComponent
   ]
   ]
 })
 })
 export class WidgetComponentsModule { }
 export class WidgetComponentsModule { }

@@ -15,4 +15,16 @@
     limitations under the License.
     limitations under the License.
 
 
 -->
 -->
-<ng-container #widgetContent></ng-container>
+<div class="tb-absolute-fill tb-widget-error" *ngIf="widgetErrorData">
+  <span>Widget Error: {{ widgetErrorData.name + ": " + widgetErrorData.message}}</span>
+</div>
+<div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">
+  <mat-spinner color="accent" md-mode="indeterminate" diameter="40"></mat-spinner>
+</div>
+<div class="tb-absolute-fill" [fxLayout]="legendContainerLayoutType">
+  <tb-legend *ngIf="displayLegend && isLegendFirst" [ngStyle]="legendStyle" [legendConfig]="legendConfig" [legendData]="legendData"></tb-legend>
+  <div fxFlex id="widget-container">
+    <ng-container #widgetContent></ng-container>
+  </div>
+  <tb-legend *ngIf="displayLegend && !isLegendFirst" [ngStyle]="legendStyle" [legendConfig]="legendConfig" [legendData]="legendData"></tb-legend>
+</div>

@@ -17,7 +17,6 @@
 import {
 import {
   AfterViewInit,
   AfterViewInit,
   Component,
   Component,
-  ComponentFactory,
   ComponentFactoryResolver,
   ComponentFactoryResolver,
   ComponentRef,
   ComponentRef,
   ElementRef,
   ElementRef,
@@ -38,34 +37,37 @@ import {
   LegendPosition,
   LegendPosition,
   Widget,
   Widget,
   WidgetActionDescriptor,
   WidgetActionDescriptor,
+  widgetActionSources,
   WidgetActionType,
   WidgetActionType,
-  WidgetInfo, WidgetResource,
-  widgetType,
-  WidgetTypeInstance,
-  widgetActionSources
+  WidgetResource,
+  widgetType
 } from '@shared/models/widget.models';
 } from '@shared/models/widget.models';
 import { PageComponent } from '@shared/components/page.component';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { AppState } from '@core/core.state';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetService } from '@core/http/widget.service';
 import { UtilsService } from '@core/services/utils.service';
 import { UtilsService } from '@core/services/utils.service';
-import { DynamicWidgetComponent } from '@home/components/widget/dynamic-widget.component';
-import { forkJoin, Observable, of, ReplaySubject, throwError } from 'rxjs';
-import { DynamicWidgetComponentFactoryService } from '@home/components/widget/dynamic-widget-component-factory.service';
+import { forkJoin, Observable, of, throwError } from 'rxjs';
 import { isDefined, objToBase64 } from '@core/utils';
 import { isDefined, objToBase64 } from '@core/utils';
 import * as $ from 'jquery';
 import * as $ from 'jquery';
-import { WidgetContext, WidgetHeaderAction } from '@home/models/widget-component.models';
+import {
+  IDynamicWidgetComponent,
+  WidgetContext,
+  WidgetHeaderAction,
+  WidgetInfo,
+  WidgetTypeInstance
+} from '@home/models/widget-component.models';
 import {
 import {
   EntityInfo,
   EntityInfo,
   IWidgetSubscription,
   IWidgetSubscription,
-  SubscriptionInfo,
-  WidgetSubscriptionOptions,
   StateObject,
   StateObject,
   StateParams,
   StateParams,
-  WidgetSubscriptionContext
+  SubscriptionInfo,
+  WidgetSubscriptionContext,
+  WidgetSubscriptionOptions
 } from '@core/api/widget-api.models';
 } from '@core/api/widget-api.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntityId } from '@shared/models/id/entity-id';
-import { ActivatedRoute, Router, UrlSegment } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import cssjs from '@core/css/css';
 import cssjs from '@core/css/css';
 import { ResourcesService } from '@core/services/resources.service';
 import { ResourcesService } from '@core/services/resources.service';
 import { catchError, switchMap } from 'rxjs/operators';
 import { catchError, switchMap } from 'rxjs/operators';
@@ -74,6 +76,7 @@ import { TimeService } from '@core/services/time.service';
 import { DeviceService } from '@app/core/http/device.service';
 import { DeviceService } from '@app/core/http/device.service';
 import { AlarmService } from '@app/core/http/alarm.service';
 import { AlarmService } from '@app/core/http/alarm.service';
 import { ExceptionData } from '@shared/models/error.models';
 import { ExceptionData } from '@shared/models/error.models';
+import { WidgetComponentService } from './widget-component.service';
 
 
 @Component({
 @Component({
   selector: 'tb-widget',
   selector: 'tb-widget',
@@ -99,14 +102,22 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
 
 
   widget: Widget;
   widget: Widget;
   widgetInfo: WidgetInfo;
   widgetInfo: WidgetInfo;
+  errorMessages: string[];
   widgetContext: WidgetContext;
   widgetContext: WidgetContext;
   widgetType: any;
   widgetType: any;
   widgetTypeInstance: WidgetTypeInstance;
   widgetTypeInstance: WidgetTypeInstance;
   widgetErrorData: ExceptionData;
   widgetErrorData: ExceptionData;
+  loadingData: boolean;
 
 
-  dynamicWidgetComponentFactory: ComponentFactory<DynamicWidgetComponent>;
-  dynamicWidgetComponentRef: ComponentRef<DynamicWidgetComponent>;
-  dynamicWidgetComponent: DynamicWidgetComponent;
+  displayLegend: boolean;
+  legendConfig: LegendConfig;
+  legendData: LegendData;
+  isLegendFirst: boolean;
+  legendContainerLayoutType: string;
+  legendStyle: {[klass: string]: any};
+
+  dynamicWidgetComponentRef: ComponentRef<IDynamicWidgetComponent>;
+  dynamicWidgetComponent: IDynamicWidgetComponent;
 
 
   subscriptionContext: WidgetSubscriptionContext;
   subscriptionContext: WidgetSubscriptionContext;
 
 
@@ -120,7 +131,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   constructor(protected store: Store<AppState>,
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
               private route: ActivatedRoute,
               private router: Router,
               private router: Router,
-              private dynamicWidgetComponentFactoryService: DynamicWidgetComponentFactoryService,
+              private widgetComponentService: WidgetComponentService,
               private componentFactoryResolver: ComponentFactoryResolver,
               private componentFactoryResolver: ComponentFactoryResolver,
               private elementRef: ElementRef,
               private elementRef: ElementRef,
               private injector: Injector,
               private injector: Injector,
@@ -134,8 +145,67 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   }
   }
 
 
   ngOnInit(): void {
   ngOnInit(): void {
+
+    this.loadingData = true;
+
     this.widget = this.dashboardWidget.widget;
     this.widget = this.dashboardWidget.widget;
 
 
+    this.displayLegend = isDefined(this.widget.config.showLegend) ? this.widget.config.showLegend
+      : this.widget.type === widgetType.timeseries;
+
+    this.legendContainerLayoutType = 'column';
+
+    if (this.displayLegend) {
+      this.legendConfig = this.widget.config.legendConfig ||
+        {
+          position: LegendPosition.bottom,
+          showMin: false,
+          showMax: false,
+          showAvg: this.widget.type === widgetType.timeseries,
+          showTotal: false
+        };
+      this.legendData = {
+        keys: [],
+        data: []
+      };
+      if (this.legendConfig.position === LegendPosition.top ||
+        this.legendConfig.position === LegendPosition.bottom) {
+        this.legendContainerLayoutType = 'column';
+      } else {
+        this.legendContainerLayoutType = 'row';
+      }
+      switch (this.legendConfig.position) {
+        case LegendPosition.top:
+          this.legendStyle = {
+            paddingBottom: '8px',
+            maxHeight: '50%',
+            overflowY: 'auto'
+          };
+          break;
+        case LegendPosition.bottom:
+          this.legendStyle = {
+            paddingTop: '8px',
+            maxHeight: '50%',
+            overflowY: 'auto'
+          };
+          break;
+        case LegendPosition.left:
+          this.legendStyle = {
+            paddingRight: '0px',
+            maxWidth: '50%',
+            overflowY: 'auto'
+          };
+          break;
+        case LegendPosition.right:
+          this.legendStyle = {
+            paddingLeft: '0px',
+            maxWidth: '50%',
+            overflowY: 'auto'
+          };
+          break;
+      }
+    }
+
     const actionDescriptorsBySourceId: {[actionSourceId: string]: Array<WidgetActionDescriptor>} = {};
     const actionDescriptorsBySourceId: {[actionSourceId: string]: Array<WidgetActionDescriptor>} = {};
     if (this.widget.config.actions) {
     if (this.widget.config.actions) {
       for (const actionSourceId of Object.keys(this.widget.config.actions)) {
       for (const actionSourceId of Object.keys(this.widget.config.actions)) {
@@ -244,10 +314,15 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
       aliasController: this.dashboard.aliasController
       aliasController: this.dashboard.aliasController
     };
     };
 
 
-    this.widgetService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType).subscribe(
+    this.widgetComponentService.getWidgetInfo(this.widget.bundleAlias, this.widget.typeAlias, this.widget.isSystemType).subscribe(
       (widgetInfo) => {
       (widgetInfo) => {
         this.widgetInfo = widgetInfo;
         this.widgetInfo = widgetInfo;
         this.loadFromWidgetInfo();
         this.loadFromWidgetInfo();
+      },
+      (errorData) => {
+        this.widgetInfo = errorData.widgetInfo;
+        this.errorMessages = errorData.errorMessages;
+        this.loadFromWidgetInfo();
       }
       }
     );
     );
 
 
@@ -363,14 +438,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
   }
   }
 
 
   private initialize() {
   private initialize() {
-    this.configureDynamicWidgetComponent().subscribe(
-      () => {
-        this.dynamicWidgetComponent.loadingData = false;
-      },
-      (error) => {
-        // TODO:
-      }
-    );
+    this.configureDynamicWidgetComponent();
+    // TODO:
+    this.loadingData = false;
   }
   }
 
 
   private destroyDynamicWidgetComponent() {
   private destroyDynamicWidgetComponent() {
@@ -381,127 +451,37 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     if (this.dynamicWidgetComponentRef) {
     if (this.dynamicWidgetComponentRef) {
       this.dynamicWidgetComponentRef.destroy();
       this.dynamicWidgetComponentRef.destroy();
     }
     }
-    if (this.dynamicWidgetComponentFactory) {
-      this.dynamicWidgetComponentFactoryService.destroyDynamicWidgetComponentFactory(this.dynamicWidgetComponentFactory);
-    }
   }
   }
 
 
   private handleWidgetException(e) {
   private handleWidgetException(e) {
     console.error(e);
     console.error(e);
     this.widgetErrorData = this.utils.processWidgetException(e);
     this.widgetErrorData = this.utils.processWidgetException(e);
-    if (this.dynamicWidgetComponent) {
-      this.dynamicWidgetComponent.widgetErrorData = this.widgetErrorData;
-    }
   }
   }
 
 
-  private configureDynamicWidgetComponent(): Observable<any> {
+  private configureDynamicWidgetComponent() {
+      this.widgetContentContainer.clear();
+      this.dynamicWidgetComponentRef = this.widgetContentContainer.createComponent(this.widgetInfo.componentFactory);
+      this.dynamicWidgetComponent = this.dynamicWidgetComponentRef.instance;
 
 
-    const dynamicWidgetComponentSubject = new ReplaySubject();
+      this.dynamicWidgetComponent.widgetContext = this.widgetContext;
+      this.dynamicWidgetComponent.errorMessages = this.errorMessages;
 
 
-    let html = '<div class="tb-absolute-fill tb-widget-error" *ngIf="widgetErrorData">' +
-      '<span>Widget Error: {{ widgetErrorData.name + ": " + widgetErrorData.message}}</span>' +
-      '</div>' +
-      '<div class="tb-absolute-fill tb-widget-loading" [fxShow]="loadingData" fxLayout="column" fxLayoutAlign="center center">' +
-      '<mat-spinner color="accent" md-mode="indeterminate" diameter="40"></mat-spinner>' +
-      '</div>';
+      this.widgetContext.$scope = this.dynamicWidgetComponent;
 
 
-    let containerHtml = `<div id="container">${this.widgetInfo.templateHtml}</div>`;
+      const containerElement = $(this.elementRef.nativeElement.querySelector('#widget-container'));
 
 
-    const displayLegend = isDefined(this.widget.config.showLegend) ? this.widget.config.showLegend
-      : this.widget.type === widgetType.timeseries;
+      this.widgetContext.$container = $('> ng-component', containerElement);
+      this.widgetContext.$container.css('display', 'block');
+      this.widgetContext.$container.attr('id', 'container');
+      this.widgetContext.$containerParent = $(containerElement);
 
 
-    let legendConfig: LegendConfig;
-    let legendData: LegendData;
-    if (displayLegend) {
-      legendConfig = this.widget.config.legendConfig ||
-        {
-          position: LegendPosition.bottom,
-          showMin: false,
-          showMax: false,
-          showAvg: this.widget.type === widgetType.timeseries,
-          showTotal: false
-        };
-      legendData = {
-        keys: [],
-        data: []
-      };
-      let layoutType;
-      if (legendConfig.position === LegendPosition.top ||
-        legendConfig.position === LegendPosition.bottom) {
-        layoutType = 'column';
-      } else {
-        layoutType = 'row';
+      if (this.widgetSizeDetected) {
+        this.widgetContext.$container.css('height', this.widgetContext.height + 'px');
+        this.widgetContext.$container.css('width', this.widgetContext.width + 'px');
       }
       }
-      let legendStyle;
-      switch (legendConfig.position) {
-        case LegendPosition.top:
-          legendStyle = 'padding-bottom: 8px; max-height: 50%; overflow-y: auto;';
-          break;
-        case LegendPosition.bottom:
-          legendStyle = 'padding-top: 8px; max-height: 50%; overflow-y: auto;';
-          break;
-        case LegendPosition.left:
-          legendStyle = 'padding-right: 0px; max-width: 50%; overflow-y: auto;';
-          break;
-        case LegendPosition.right:
-          legendStyle = 'padding-left: 0px; max-width: 50%; overflow-y: auto;';
-          break;
-      }
-
-      const legendHtml = `<tb-legend style="${legendStyle}" [legendConfig]="legendConfig" [legendData]="legendData"></tb-legend>`;
-      containerHtml = `<div fxFlex id="widget-container">${containerHtml}</div>`;
-      html += `<div class="tb-absolute-fill" fxLayout="${layoutType}">`;
-      if (legendConfig.position === LegendPosition.top ||
-        legendConfig.position === LegendPosition.left) {
-        html += legendHtml;
-        html += containerHtml;
-      } else {
-        html += containerHtml;
-        html += legendHtml;
-      }
-      html += '</div>';
-    } else {
-      html += containerHtml;
-    }
-
-    this.dynamicWidgetComponentFactoryService.createDynamicWidgetComponentFactory(html).subscribe(
-      (componentFactory) => {
-        this.dynamicWidgetComponentFactory = componentFactory;
-        this.widgetContentContainer.clear();
-        this.dynamicWidgetComponentRef = this.widgetContentContainer.createComponent(this.dynamicWidgetComponentFactory);
-        this.dynamicWidgetComponent = this.dynamicWidgetComponentRef.instance;
-
-        this.dynamicWidgetComponent.loadingData = true;
-        this.dynamicWidgetComponent.widgetContext = this.widgetContext;
-        this.dynamicWidgetComponent.widgetErrorData = this.widgetErrorData;
-        this.dynamicWidgetComponent.displayLegend = displayLegend;
-        this.dynamicWidgetComponent.legendConfig = legendConfig;
-        this.dynamicWidgetComponent.legendData = legendData;
-
-        this.widgetContext.$scope = this.dynamicWidgetComponent;
 
 
-        const containerElement = displayLegend ? $(this.elementRef.nativeElement.querySelector('#widget-container'))
-          : $(this.elementRef.nativeElement);
-
-        this.widgetContext.$container = $('#container', containerElement);
-        this.widgetContext.$containerParent = $(containerElement);
-
-        if (this.widgetSizeDetected) {
-          this.widgetContext.$container.css('height', this.widgetContext.height + 'px');
-          this.widgetContext.$container.css('width', this.widgetContext.width + 'px');
-        }
-
-        // @ts-ignore
-        addResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener);
-
-        dynamicWidgetComponentSubject.next();
-        dynamicWidgetComponentSubject.complete();
-      },
-      (e) => {
-        dynamicWidgetComponentSubject.error(e);
-      }
-    );
-    return dynamicWidgetComponentSubject.asObservable();
+      // @ts-ignore
+      addResizeListener(this.widgetContext.$containerParent[0], this.onResizeListener);
   }
   }
 
 
   private createSubscription(options: WidgetSubscriptionOptions, subscribe: boolean): Observable<IWidgetSubscription> {
   private createSubscription(options: WidgetSubscriptionOptions, subscribe: boolean): Observable<IWidgetSubscription> {

@@ -16,23 +16,30 @@
 
 
 import { ExceptionData } from '@shared/models/error.models';
 import { ExceptionData } from '@shared/models/error.models';
 import { IDashboardComponent } from '@home/models/dashboard-component.models';
 import { IDashboardComponent } from '@home/models/dashboard-component.models';
-import { WidgetActionDescriptor, WidgetConfig, WidgetConfigSettings, widgetType } from '@shared/models/widget.models';
+import {
+  WidgetActionDescriptor,
+  WidgetActionSource,
+  WidgetConfig,
+  WidgetConfigSettings,
+  WidgetControllerDescriptor,
+  WidgetType,
+  widgetType,
+  WidgetTypeDescriptor,
+  WidgetTypeParameters
+} from '@shared/models/widget.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import { Timewindow } from '@shared/models/time/time.models';
 import {
 import {
   EntityInfo,
   EntityInfo,
-  IWidgetSubscription,
-  SubscriptionInfo,
-  WidgetSubscriptionOptions,
-  IStateController,
   IAliasController,
   IAliasController,
-  TimewindowFunctions,
-  WidgetSubscriptionApi,
+  IStateController,
+  IWidgetSubscription,
+  IWidgetUtils,
   RpcApi,
   RpcApi,
+  TimewindowFunctions,
   WidgetActionsApi,
   WidgetActionsApi,
-  IWidgetUtils
+  WidgetSubscriptionApi
 } from '@core/api/widget-api.models';
 } from '@core/api/widget-api.models';
-import { Observable } from 'rxjs';
-import { EntityId } from '@shared/models/id/entity-id';
+import { ComponentFactory } from '@angular/core';
 
 
 export interface IWidgetAction {
 export interface IWidgetAction {
   name: string;
   name: string;
@@ -49,13 +56,6 @@ export interface WidgetAction extends IWidgetAction {
   show: boolean;
   show: boolean;
 }
 }
 
 
-export interface IDynamicWidgetComponent {
-  widgetContext: WidgetContext;
-  widgetErrorData: ExceptionData;
-  loadingData: boolean;
-  [key: string]: any;
-}
-
 export interface WidgetContext {
 export interface WidgetContext {
   inited?: boolean;
   inited?: boolean;
   $container?: any;
   $container?: any;
@@ -87,3 +87,93 @@ export interface WidgetContext {
   customHeaderActions?: Array<WidgetHeaderAction>;
   customHeaderActions?: Array<WidgetHeaderAction>;
   widgetActions?: Array<WidgetAction>;
   widgetActions?: Array<WidgetAction>;
 }
 }
+
+export interface IDynamicWidgetComponent {
+  widgetContext: WidgetContext;
+  errorMessages: string[];
+  [key: string]: any;
+}
+
+export interface WidgetInfo extends WidgetTypeDescriptor, WidgetControllerDescriptor {
+  widgetName: string;
+  alias: string;
+  typeSettingsSchema?: string;
+  typeDataKeySettingsSchema?: string;
+  componentFactory?: ComponentFactory<IDynamicWidgetComponent>;
+}
+
+export const MissingWidgetType: WidgetInfo = {
+  type: widgetType.latest,
+  widgetName: 'Widget type not found',
+  alias: 'undefined',
+  sizeX: 8,
+  sizeY: 6,
+  resources: [],
+  templateHtml: '<div class="tb-widget-error-container">' +
+    '<div translate class="tb-widget-error-msg">widget.widget-type-not-found</div>' +
+    '</div>',
+  templateCss: '',
+  controllerScript: 'self.onInit = function() {}',
+  settingsSchema: '{}\n',
+  dataKeySettingsSchema: '{}\n',
+  defaultConfig: '{\n' +
+    '"title": "Widget type not found",\n' +
+    '"datasources": [],\n' +
+    '"settings": {}\n' +
+    '}\n'
+};
+
+export const ErrorWidgetType: WidgetInfo = {
+  type: widgetType.latest,
+  widgetName: 'Error loading widget',
+  alias: 'error',
+  sizeX: 8,
+  sizeY: 6,
+  resources: [],
+  templateHtml: '<div class="tb-widget-error-container">' +
+                   '<div translate class="tb-widget-error-msg">widget.widget-type-load-error</div>' +
+                   '<div *ngFor="let error of errorMessages" class="tb-widget-error-msg">{{ error }}</div>' +
+                '</div>',
+  templateCss: '',
+  controllerScript: 'self.onInit = function() {}',
+  settingsSchema: '{}\n',
+  dataKeySettingsSchema: '{}\n',
+  defaultConfig: '{\n' +
+    '"title": "Widget failed to load",\n' +
+    '"datasources": [],\n' +
+    '"settings": {}\n' +
+    '}\n'
+};
+
+export interface WidgetTypeInstance {
+  getSettingsSchema?: () => string;
+  getDataKeySettingsSchema?: () => string;
+  typeParameters?: () => WidgetTypeParameters;
+  useCustomDatasources?: () => boolean;
+  actionSources?: () => {[key: string]: WidgetActionSource};
+
+  onInit?: () => void;
+  onDataUpdated?: () => void;
+  onResize?: () => void;
+  onEditModeChanged?: () => void;
+  onMobileModeChanged?: () => void;
+  onDestroy?: () => void;
+}
+
+export function toWidgetInfo(widgetTypeEntity: WidgetType): WidgetInfo {
+  return {
+    widgetName: widgetTypeEntity.name,
+    alias: widgetTypeEntity.alias,
+    type: widgetTypeEntity.descriptor.type,
+    sizeX: widgetTypeEntity.descriptor.sizeX,
+    sizeY: widgetTypeEntity.descriptor.sizeY,
+    resources: widgetTypeEntity.descriptor.resources,
+    templateHtml: widgetTypeEntity.descriptor.templateHtml,
+    templateCss: widgetTypeEntity.descriptor.templateCss,
+    controllerScript: widgetTypeEntity.descriptor.controllerScript,
+    settingsSchema: widgetTypeEntity.descriptor.settingsSchema,
+    dataKeySettingsSchema: widgetTypeEntity.descriptor.dataKeySettingsSchema,
+    defaultConfig: widgetTypeEntity.descriptor.defaultConfig
+  };
+}
+

@@ -25,13 +25,14 @@ import { ActivatedRoute } from '@angular/router';
 import { Authority } from '@shared/models/authority.enum';
 import { Authority } from '@shared/models/authority.enum';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { Observable } from 'rxjs';
 import { Observable } from 'rxjs';
-import { toWidgetInfo, Widget, widgetType } from '@app/shared/models/widget.models';
+import { Widget, widgetType } from '@app/shared/models/widget.models';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetService } from '@core/http/widget.service';
 import { map, share } from 'rxjs/operators';
 import { map, share } from 'rxjs/operators';
 import { DialogService } from '@core/services/dialog.service';
 import { DialogService } from '@core/services/dialog.service';
 import { FooterFabButtons } from '@app/shared/components/footer-fab-buttons.component';
 import { FooterFabButtons } from '@app/shared/components/footer-fab-buttons.component';
 import { DashboardCallbacks, WidgetsData } from '@home/models/dashboard-component.models';
 import { DashboardCallbacks, WidgetsData } from '@home/models/dashboard-component.models';
 import { IAliasController } from '@app/core/api/widget-api.models';
 import { IAliasController } from '@app/core/api/widget-api.models';
+import { toWidgetInfo } from '@home/models/widget-component.models';
 
 
 @Component({
 @Component({
   selector: 'tb-widget-library',
   selector: 'tb-widget-library',

@@ -14,11 +14,9 @@
 /// limitations under the License.
 /// limitations under the License.
 ///
 ///
 
 
-import {BaseData} from '@shared/models/base-data';
-import {TenantId} from '@shared/models/id/tenant-id';
-import {WidgetsBundleId} from '@shared/models/id/widgets-bundle-id';
-import {WidgetTypeId} from '@shared/models/id/widget-type-id';
-import { AliasEntityType, EntityType, EntityTypeTranslation } from '@shared/models/entity-type.models';
+import { BaseData } from '@shared/models/base-data';
+import { TenantId } from '@shared/models/id/tenant-id';
+import { WidgetTypeId } from '@shared/models/id/widget-type-id';
 import { Timewindow } from '@shared/models/time/time.models';
 import { Timewindow } from '@shared/models/time/time.models';
 
 
 export enum widgetType {
 export enum widgetType {
@@ -139,86 +137,6 @@ export interface WidgetType extends BaseData<WidgetTypeId> {
   descriptor: WidgetTypeDescriptor;
   descriptor: WidgetTypeDescriptor;
 }
 }
 
 
-export interface WidgetInfo extends WidgetTypeDescriptor, WidgetControllerDescriptor {
-  widgetName: string;
-  alias: string;
-  typeSettingsSchema?: string;
-  typeDataKeySettingsSchema?: string;
-}
-
-export const MissingWidgetType: WidgetInfo = {
-  type: widgetType.latest,
-  widgetName: 'Widget type not found',
-  alias: 'undefined',
-  sizeX: 8,
-  sizeY: 6,
-  resources: [],
-  templateHtml: '<div class="tb-widget-error-container">' +
-                    '<div translate class="tb-widget-error-msg">widget.widget-type-not-found</div>' +
-                '</div>',
-  templateCss: '',
-  controllerScript: 'self.onInit = function() {}',
-  settingsSchema: '{}\n',
-  dataKeySettingsSchema: '{}\n',
-  defaultConfig: '{\n' +
-    '"title": "Widget type not found",\n' +
-    '"datasources": [],\n' +
-    '"settings": {}\n' +
-    '}\n'
-};
-
-export const ErrorWidgetType: WidgetInfo = {
-  type: widgetType.latest,
-  widgetName: 'Error loading widget',
-  alias: 'error',
-  sizeX: 8,
-  sizeY: 6,
-  resources: [],
-  templateHtml: '<div class="tb-widget-error-container">' +
-    '<div translate class="tb-widget-error-msg">widget.widget-type-load-error</div>',
-  templateCss: '',
-  controllerScript: 'self.onInit = function() {}',
-  settingsSchema: '{}\n',
-  dataKeySettingsSchema: '{}\n',
-  defaultConfig: '{\n' +
-    '"title": "Widget failed to load",\n' +
-    '"datasources": [],\n' +
-    '"settings": {}\n' +
-    '}\n'
-};
-
-export interface WidgetTypeInstance {
-  getSettingsSchema?: () => string;
-  getDataKeySettingsSchema?: () => string;
-  typeParameters?: () => WidgetTypeParameters;
-  useCustomDatasources?: () => boolean;
-  actionSources?: () => {[key: string]: WidgetActionSource};
-
-  onInit?: () => void;
-  onDataUpdated?: () => void;
-  onResize?: () => void;
-  onEditModeChanged?: () => void;
-  onMobileModeChanged?: () => void;
-  onDestroy?: () => void;
-}
-
-export function toWidgetInfo(widgetTypeEntity: WidgetType): WidgetInfo {
-  return {
-      widgetName: widgetTypeEntity.name,
-      alias: widgetTypeEntity.alias,
-      type: widgetTypeEntity.descriptor.type,
-      sizeX: widgetTypeEntity.descriptor.sizeX,
-      sizeY: widgetTypeEntity.descriptor.sizeY,
-      resources: widgetTypeEntity.descriptor.resources,
-      templateHtml: widgetTypeEntity.descriptor.templateHtml,
-      templateCss: widgetTypeEntity.descriptor.templateCss,
-      controllerScript: widgetTypeEntity.descriptor.controllerScript,
-      settingsSchema: widgetTypeEntity.descriptor.settingsSchema,
-      dataKeySettingsSchema: widgetTypeEntity.descriptor.dataKeySettingsSchema,
-      defaultConfig: widgetTypeEntity.descriptor.defaultConfig
-  };
-}
-
 export enum LegendDirection {
 export enum LegendDirection {
   column = 'column',
   column = 'column',
   row = 'row'
   row = 'row'