Rule nodes UI migration

ui-ngx/src/app/core/http/rule-chain.service.ts

@@ -243,8 +243,8 @@ export class RuleChainService {
           map((res) => {
             if (nodeDefinition.configDirective && nodeDefinition.configDirective.length) {
               const selector = snakeCase(nodeDefinition.configDirective, '-');
-              const componentFactory = res.componentFactories.find((factory) =>
+              const componentFactory = res.find((factory) =>
-                factory.selector === selector);
+              factory.selector === selector);
               if (componentFactory) {
                 this.ruleNodeConfigFactories[nodeDefinition.configDirective] = componentFactory;
               } else {

ui-ngx/src/app/core/services/resources.service.ts

@@ -14,9 +14,17 @@
 /// limitations under the License.
 ///
 
-import { Injectable, Inject, ModuleWithComponentFactories, Compiler, Injector } from '@angular/core';
+import {
+  Compiler,
+  ComponentFactory,
+  Inject,
+  Injectable,
+  Injector,
+  ModuleWithComponentFactories,
+  Type
+} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { ReplaySubject, Observable, throwError } from 'rxjs';
+import { forkJoin, Observable, ReplaySubject, throwError } from 'rxjs';
 
 declare const SystemJS;
 
@@ -26,7 +34,7 @@ declare const SystemJS;
 export class ResourcesService {
 
   private loadedResources: { [url: string]: ReplaySubject<any> } = {};
-  private loadedModules: { [url: string]: ReplaySubject<ModuleWithComponentFactories<any>> } = {};
+  private loadedModules: { [url: string]: ReplaySubject<ComponentFactory<any>[]> } = {};
 
   private anchor = this.document.getElementsByTagName('head')[0] || this.document.getElementsByTagName('body')[0];
 
@@ -52,11 +60,11 @@ export class ResourcesService {
     return this.loadResourceByType(fileType, url);
   }
 
-  public loadModule(url: string, modulesMap: {[key: string]: any}): Observable<ModuleWithComponentFactories<any>> {
+  public loadModule(url: string, modulesMap: {[key: string]: any}): Observable<ComponentFactory<any>[]> {
     if (this.loadedModules[url]) {
       return this.loadedModules[url].asObservable();
     }
-    const subject = new ReplaySubject<ModuleWithComponentFactories<any>>();
+    const subject = new ReplaySubject<ComponentFactory<any>[]>();
     this.loadedModules[url] = subject;
     if (modulesMap) {
       for (const moduleId of Object.keys(modulesMap)) {
@@ -65,23 +73,30 @@ export class ResourcesService {
     }
     SystemJS.import(url).then(
       (module) => {
-        if (module.default) {
+        const modules = this.extractNgModules(module);
-          this.compiler.compileModuleAndAllComponentsAsync(module.default).then(
+        if (modules.length) {
-            (compiled) => {
+          const tasks: Promise<ModuleWithComponentFactories<any>>[] = [];
-              try {
+          for (const m of modules) {
-                compiled.ngModuleFactory.create(this.injector);
+            tasks.push(this.compiler.compileModuleAndAllComponentsAsync(m));
-                this.loadedModules[url].next(compiled);
+          }
-                this.loadedModules[url].complete();
+          forkJoin(tasks).subscribe((compiled) => {
-              } catch (e) {
+            try {
-                this.loadedModules[url].error(new Error(`Unable to init module from url: ${url}`));
+              const componentFactories: ComponentFactory<any>[] = [];
-                delete this.loadedModules[url];
+              for (const c of compiled) {
+                c.ngModuleFactory.create(this.injector);
+                componentFactories.push(...c.componentFactories);
               }
-            },
+              this.loadedModules[url].next(componentFactories);
-            (e) => {
+              this.loadedModules[url].complete();
-              this.loadedModules[url].error(new Error(`Unable to compile module from url: ${url}`));
+            } catch (e) {
+              this.loadedModules[url].error(new Error(`Unable to init module from url: ${url}`));
               delete this.loadedModules[url];
             }
-          );
+          },
+          (e) => {
+              this.loadedModules[url].error(new Error(`Unable to compile module from url: ${url}`));
+              delete this.loadedModules[url];
+          });
         } else {
           this.loadedModules[url].error(new Error(`Module '${url}' doesn't have default export!`));
           delete this.loadedModules[url];
@@ -95,6 +110,17 @@ export class ResourcesService {
     return subject.asObservable();
   }
 
+  private extractNgModules(module: any, modules: Type<any>[] = [] ): Type<any>[] {
+    if (module && 'ɵmod' in module) {
+      modules.push(module);
+    } else {
+      for (const k of Object.keys(module)) {
+        this.extractNgModules(module[k], modules);
+      }
+    }
+    return modules;
+  }
+
   private loadResourceByType(type: 'css' | 'js', url: string): Observable<any> {
     const subject = new ReplaySubject();
     this.loadedResources[url] = subject;

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts

@@ -42,7 +42,8 @@ import * as AngularCommon from '@angular/common';
 import * as AngularForms from '@angular/forms';
 import * as AngularCdkCoercion from '@angular/cdk/coercion';
 import * as AngularCdkKeycodes from '@angular/cdk/keycodes';
-import * as AngularMaterial from '@angular/material/esm5';
+import * as AngularMaterialChips from '@angular/material/chips';
+import * as AngularMaterialAutocomplete from '@angular/material/autocomplete';
 import * as NgrxStore from '@ngrx/store';
 import * as TranslateCore from '@ngx-translate/core';
 import * as TbCore from '@core/public-api';
@@ -58,7 +59,8 @@ const ruleNodeConfigResourcesModulesMap = {
   '@angular/forms': SystemJS.newModule(AngularForms),
   '@angular/cdk/keycodes': SystemJS.newModule(AngularCdkKeycodes),
   '@angular/cdk/coercion': SystemJS.newModule(AngularCdkCoercion),
-  '@angular/material': SystemJS.newModule(AngularMaterial),
+  '@angular/material/chips': SystemJS.newModule(AngularMaterialChips),
+  '@angular/material/autocomplete': SystemJS.newModule(AngularMaterialAutocomplete),
   '@ngrx/store': SystemJS.newModule(NgrxStore),
   rxjs: SystemJS.newModule(RxJs),
   'rxjs/operators': SystemJS.newModule(RxJsOperators),