UI: Add lazy-load rulechain page components

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

@@ -53,6 +53,7 @@ export class RuleChainService {
   private ruleNodeComponentsMap: Map<RuleChainType, Array<RuleNodeComponentDescriptor>> =
     new Map<RuleChainType, Array<RuleNodeComponentDescriptor>>();
   private ruleNodeConfigComponents: {[directive: string]: Type<IRuleNodeConfigurationComponent>} = {};
+  private systemRuleNodeConfigComponents: {[directive: string]: Type<IRuleNodeConfigurationComponent>} = {};
 
   constructor(
     private http: HttpClient,
@@ -128,7 +129,10 @@ export class RuleChainService {
     }
   }
 
-  public getRuleNodeConfigComponent(directive: string): Type<IRuleNodeConfigurationComponent> {
+  public getRuleNodeConfigComponent(directive: string, isSystemComponent = false): Type<IRuleNodeConfigurationComponent> {
+    if (isSystemComponent) {
+      return this.systemRuleNodeConfigComponents[directive];
+    }
     return this.ruleNodeConfigComponents[directive];
   }
 
@@ -180,6 +184,10 @@ export class RuleChainService {
     return this.http.post<TestScriptResult>(url, inputParams, defaultHttpOptionsFromConfig(config));
   }
 
+  public registemSystemRuleNodeConfigComponent(componentMap: Record<string, Type<IRuleNodeConfigurationComponent>>) {
+    this.systemRuleNodeConfigComponents = componentMap;
+  }
+
   private loadRuleNodeComponents(ruleChainType: RuleChainType, config?: RequestConfig): Observable<Array<RuleNodeComponentDescriptor>> {
     return this.componentDescriptorService.getComponentDescriptorsByTypes(ruleNodeTypeComponentTypes, ruleChainType, config).pipe(
       map((components) => {

ui-ngx/src/app/modules/home/components/rule-node/rule-node-config.module.ts

@@ -43,6 +43,7 @@ import {
   FlowRuleNodeConfigModule
 } from '@home/components/rule-node/flow/flow-rule-node-config.module';
 import { IRuleNodeConfigurationComponent } from '@shared/models/rule-node.models';
+import { RuleChainService } from '@core/http/rule-chain.service';
 
 @NgModule({
   declarations: [
@@ -62,14 +63,17 @@ import { IRuleNodeConfigurationComponent } from '@shared/models/rule-node.models
     EmptyConfigComponent
   ]
 })
-export class RuleNodeConfigModule {}
+export class RuleNodeConfigModule {
-
+  constructor(private ruleChainService: RuleChainService) {
-export const ruleNodeConfigComponentsMap: Record<string, Type<IRuleNodeConfigurationComponent>> = {
+    const ruleNodeConfigComponentsMap: Record<string, Type<IRuleNodeConfigurationComponent>> = {
-  ...actionRuleNodeConfigComponentsMap,
+      ...actionRuleNodeConfigComponentsMap,
-  ...enrichmentRuleNodeConfigComponentsMap,
+      ...enrichmentRuleNodeConfigComponentsMap,
-  ...externalRuleNodeConfigComponentsMap,
+      ...externalRuleNodeConfigComponentsMap,
-  ...filterRuleNodeConfigComponentsMap,
+      ...filterRuleNodeConfigComponentsMap,
-  ...flowRuleNodeConfigComponentsMap,
+      ...flowRuleNodeConfigComponentsMap,
-  ...transformationRuleNodeConfigComponentsMap,
+      ...transformationRuleNodeConfigComponentsMap,
-  'tbNodeEmptyConfig': EmptyConfigComponent
+      'tbNodeEmptyConfig': EmptyConfigComponent
-};
+    };
+    this.ruleChainService.registemSystemRuleNodeConfigComponent(ruleNodeConfigComponentsMap);
+  }
+}

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

@@ -291,6 +291,7 @@ const routes: Routes = [
                   import: false,
                   ruleChainType: RuleChainType.EDGE
                 },
+                loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
                 resolve: {
                   ruleChain: RuleChainResolver,
                   ruleChainMetaData: RuleChainMetaDataResolver,
@@ -336,6 +337,7 @@ const routes: Routes = [
               import: false,
               ruleChainType: RuleChainType.EDGE
             },
+            loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
             resolve: {
               ruleChain: RuleChainResolver,
               ruleChainMetaData: RuleChainMetaDataResolver,
@@ -358,6 +360,7 @@ const routes: Routes = [
               import: true,
               ruleChainType: RuleChainType.EDGE
             },
+            loadChildren: () => import('../rulechain/rulechain-page.module').then(m => m.RuleChainPageModule),
             resolve: {
               ruleNodeComponents: RuleNodeComponentsResolver,
               tooltipster: TooltipsterResolver

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts

@@ -21,7 +21,7 @@ import {
   forwardRef,
   Input,
   OnDestroy,
-  Output, Type,
+  Output,
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
@@ -43,7 +43,6 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component';
 import { deepClone } from '@core/utils';
 import { RuleChainType } from '@shared/models/rule-chain.models';
-import { ruleNodeConfigComponentsMap } from '@home/components/rule-node/rule-node-config.module';
 
 @Component({
   selector: 'tb-rule-node-config',
@@ -213,12 +212,7 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnDestroy
         this.changeScriptSubscription = null;
       }
       this.definedConfigContainer.clear();
-      let component: Type<IRuleNodeConfigurationComponent>;
+      const component = this.ruleChainService.getRuleNodeConfigComponent(this.nodeDefinition.configDirective, !this.nodeDefinition.uiResources?.length);
-      if (!this.nodeDefinition.uiResources?.length) {
-        component = ruleNodeConfigComponentsMap[this.nodeDefinition.configDirective];
-      } else {
-        component = this.ruleChainService.getRuleNodeConfigComponent(this.nodeDefinition.configDirective);
-      }
       this.definedConfigComponentRef = this.definedConfigContainer.createComponent(component);
       this.definedConfigComponent = this.definedConfigComponentRef.instance;
       this.definedConfigComponent.ruleNodeId = this.ruleNodeId;

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

@@ -0,0 +1,57 @@
+///
+/// Copyright © 2016-2024 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeComponentsModule } from '@home/components/home-components.module';
+import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
+import {
+  EntityDebugSettingsButtonComponent
+} from '@home/components/entity/debug/entity-debug-settings-button.component';
+import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-config.module';
+import {
+  AddRuleNodeDialogComponent,
+  AddRuleNodeLinkDialogComponent,
+  CreateNestedRuleChainDialogComponent,
+  RuleChainPageComponent
+} from '@home/pages/rulechain/rulechain-page.component';
+import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-details.component';
+import { RuleNodeConfigComponent } from '@home/pages/rulechain/rule-node-config.component';
+import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
+import { RuleNodeLinkComponent } from '@home/pages/rulechain/rule-node-link.component';
+
+@NgModule({
+  declarations: [
+    RuleChainPageComponent,
+    RuleNodeDetailsComponent,
+    LinkLabelsComponent,
+    RuleNodeLinkComponent,
+    RuleNodeConfigComponent,
+    AddRuleNodeLinkDialogComponent,
+    AddRuleNodeDialogComponent,
+    CreateNestedRuleChainDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    DurationLeftPipe,
+    EntityDebugSettingsButtonComponent,
+    RuleNodeConfigModule,
+    HomeComponentsModule,
+  ]
+})
+export class RuleChainPageModule {}

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

@@ -148,6 +148,7 @@ const routes: Routes = [
           import: false,
           ruleChainType: RuleChainType.CORE
         },
+        loadChildren: () => import('./rulechain-page.module').then(m => m.RuleChainPageModule),
         resolve: {
           ruleChain: RuleChainResolver,
           ruleChainMetaData: RuleChainMetaDataResolver,
@@ -170,6 +171,7 @@ const routes: Routes = [
           import: true,
           ruleChainType: RuleChainType.CORE
         },
+        loadChildren: () => import('./rulechain-page.module').then(m => m.RuleChainPageModule),
         resolve: {
           ruleNodeComponents: RuleNodeComponentsResolver,
           tooltipster: TooltipsterResolver

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

@@ -21,34 +21,14 @@ import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.comp
 import { RuleChainRoutingModule } from '@modules/home/pages/rulechain/rulechain-routing.module';
 import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
-import {
-  AddRuleNodeDialogComponent,
-  AddRuleNodeLinkDialogComponent, CreateNestedRuleChainDialogComponent,
-  RuleChainPageComponent
-} from './rulechain-page.component';
 import { RuleNodeComponent } from '@home/pages/rulechain/rulenode.component';
 import { FC_NODE_COMPONENT_CONFIG } from 'ngx-flowchart';
-import { RuleNodeDetailsComponent } from './rule-node-details.component';
-import { RuleNodeLinkComponent } from './rule-node-link.component';
-import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
-import { RuleNodeConfigComponent } from './rule-node-config.component';
-import { DurationLeftPipe } from '@shared/pipe/duration-left.pipe';
-import { EntityDebugSettingsButtonComponent } from '@home/components/entity/debug/entity-debug-settings-button.component';
-import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-config.module';
 
 @NgModule({
   declarations: [
     RuleChainComponent,
     RuleChainTabsComponent,
-    RuleChainPageComponent,
     RuleNodeComponent,
-    RuleNodeDetailsComponent,
-    RuleNodeConfigComponent,
-    LinkLabelsComponent,
-    RuleNodeLinkComponent,
-    AddRuleNodeLinkDialogComponent,
-    AddRuleNodeDialogComponent,
-    CreateNestedRuleChainDialogComponent
   ],
   providers: [
     {
@@ -56,16 +36,13 @@ import { RuleNodeConfigModule } from '@home/components/rule-node/rule-node-confi
       useValue: {
         nodeComponentType: RuleNodeComponent
       }
-    }
+    },
   ],
   imports: [
     CommonModule,
     SharedModule,
     HomeComponentsModule,
     RuleChainRoutingModule,
-    DurationLeftPipe,
-    EntityDebugSettingsButtonComponent,
-    RuleNodeConfigModule,
   ]
 })
 export class RuleChainModule { }