From dddbe34f1b11fe04490c1eff12c3673f531fb0c5 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 17 Aug 2020 16:11:01 +0300 Subject: [PATCH] Improve modules loading --- .../widget/widget-component.service.ts | 45 ++--------------- .../modules/home/pages/home-pages.module.ts | 46 ++++++++++++++++++ .../rulechain/rulechain-routing.module.ts | 48 ++----------------- ui-ngx/src/app/shared/models/constants.ts | 4 ++ 4 files changed, 60 insertions(+), 83 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts index cbcf86807d..04dc845450 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Inject, Injectable, Type } from '@angular/core'; +import { Inject, Injectable, Optional, Type } 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'; @@ -41,43 +41,7 @@ import { NULL_UUID } from '@shared/models/id/has-uuid'; import { WidgetTypeId } from '@app/shared/models/id/widget-type-id'; import { TenantId } from '@app/shared/models/id/tenant-id'; import { SharedModule } from '@shared/shared.module'; -import * as AngularCore from '@angular/core'; -import * as AngularCommon from '@angular/common'; -import * as AngularForms from '@angular/forms'; -import * as AngularRouter from '@angular/router'; -import * as AngularCdkKeycodes from '@angular/cdk/keycodes'; -import * as AngularCdkCoercion from '@angular/cdk/coercion'; -import * as AngularMaterialChips from '@angular/material/chips'; -import * as AngularMaterialAutocomplete from '@angular/material/autocomplete'; -import * as AngularMaterialDialog from '@angular/material/dialog'; -import * as NgrxStore from '@ngrx/store'; -import * as RxJs from 'rxjs'; -import * as RxJsOperators from 'rxjs/operators'; -import * as TranslateCore from '@ngx-translate/core'; -import * as TbCore from '@core/public-api'; -import * as TbShared from '@shared/public-api'; -import * as _moment from 'moment'; - -declare const SystemJS; - -const widgetResourcesModulesMap = { - '@angular/core': SystemJS.newModule(AngularCore), - '@angular/common': SystemJS.newModule(AngularCommon), - '@angular/forms': SystemJS.newModule(AngularForms), - '@angular/router': SystemJS.newModule(AngularRouter), - '@angular/cdk/keycodes': SystemJS.newModule(AngularCdkKeycodes), - '@angular/cdk/coercion': SystemJS.newModule(AngularCdkCoercion), - '@angular/material/chips': SystemJS.newModule(AngularMaterialChips), - '@angular/material/autocomplete': SystemJS.newModule(AngularMaterialAutocomplete), - '@angular/material/dialog': SystemJS.newModule(AngularMaterialDialog), - '@ngrx/store': SystemJS.newModule(NgrxStore), - rxjs: SystemJS.newModule(RxJs), - 'rxjs/operators': SystemJS.newModule(RxJsOperators), - '@ngx-translate/core': SystemJS.newModule(TranslateCore), - '@core/public-api': SystemJS.newModule(TbCore), - '@shared/public-api': SystemJS.newModule(TbShared), - moment: SystemJS.newModule(_moment) -}; +import { MODULES_MAP } from '@shared/public-api'; // @dynamic @Injectable() @@ -96,6 +60,7 @@ export class WidgetComponentService { private editingWidgetType: WidgetType; constructor(@Inject(WINDOW) private window: Window, + @Optional() @Inject(MODULES_MAP) private modulesMap: {[key: string]: any}, private dynamicComponentFactoryService: DynamicComponentFactoryService, private widgetService: WidgetService, private utils: UtilsService, @@ -260,7 +225,7 @@ export class WidgetComponentService { widgetInfo.resources.filter(r => r.isModule).forEach( (resource) => { modulesTasks.push( - this.resources.loadModules(resource.url, widgetResourcesModulesMap).pipe( + this.resources.loadModules(resource.url, this.modulesMap).pipe( catchError((e: Error) => of(e?.message ? e.message : `Failed to load widget resource module: '${resource.url}'`)) ) ); @@ -317,7 +282,7 @@ export class WidgetComponentService { const errorMessage = `Failed to compile widget html. \n Error: ${details.message}`; return of(errorMessage); }) - ) + ); } })) ); diff --git a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts index 8ff4824c10..b3f40cf3b3 100644 --- a/ui-ngx/src/app/modules/home/pages/home-pages.module.ts +++ b/ui-ngx/src/app/modules/home/pages/home-pages.module.ts @@ -29,6 +29,46 @@ import { EntityViewModule } from '@modules/home/pages/entity-view/entity-view.mo import { RuleChainModule } from '@modules/home/pages/rulechain/rulechain.module'; import { WidgetLibraryModule } from '@modules/home/pages/widget/widget-library.module'; import { DashboardModule } from '@modules/home/pages/dashboard/dashboard.module'; +import * as AngularCore from '@angular/core'; +import * as AngularCommon from '@angular/common'; +import * as AngularForms from '@angular/forms'; +import * as AngularRouter from '@angular/router'; +import * as AngularCdkKeycodes from '@angular/cdk/keycodes'; +import * as AngularCdkCoercion from '@angular/cdk/coercion'; +import * as AngularMaterialChips from '@angular/material/chips'; +import * as AngularMaterialAutocomplete from '@angular/material/autocomplete'; +import * as AngularMaterialDialog from '@angular/material/dialog'; +import * as NgrxStore from '@ngrx/store'; +import * as RxJs from 'rxjs'; +import * as RxJsOperators from 'rxjs/operators'; +import * as TranslateCore from '@ngx-translate/core'; +import * as TbCore from '@core/public-api'; +import * as TbShared from '@shared/public-api'; +import * as TbHomeComponents from '@home/components/public-api'; +import * as _moment from 'moment'; +import { MODULES_MAP } from '@shared/public-api'; + +declare const SystemJS; + +const modulesMap: {[key: string]: any} = { + '@angular/core': SystemJS.newModule(AngularCore), + '@angular/common': SystemJS.newModule(AngularCommon), + '@angular/forms': SystemJS.newModule(AngularForms), + '@angular/router': SystemJS.newModule(AngularRouter), + '@angular/cdk/keycodes': SystemJS.newModule(AngularCdkKeycodes), + '@angular/cdk/coercion': SystemJS.newModule(AngularCdkCoercion), + '@angular/material/chips': SystemJS.newModule(AngularMaterialChips), + '@angular/material/autocomplete': SystemJS.newModule(AngularMaterialAutocomplete), + '@angular/material/dialog': SystemJS.newModule(AngularMaterialDialog), + '@ngrx/store': SystemJS.newModule(NgrxStore), + rxjs: SystemJS.newModule(RxJs), + 'rxjs/operators': SystemJS.newModule(RxJsOperators), + '@ngx-translate/core': SystemJS.newModule(TranslateCore), + '@core/public-api': SystemJS.newModule(TbCore), + '@shared/public-api': SystemJS.newModule(TbShared), + '@home/components/public-api': SystemJS.newModule(TbHomeComponents), + moment: SystemJS.newModule(_moment) +}; @NgModule({ exports: [ @@ -45,6 +85,12 @@ import { DashboardModule } from '@modules/home/pages/dashboard/dashboard.module' DashboardModule, AuditLogModule, UserModule + ], + providers: [ + { + provide: MODULES_MAP, + useValue: modulesMap + } ] }) export class HomePagesModule { } diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts index 99c8bf2a9f..0431be2e14 100644 --- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts +++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-routing.module.ts @@ -14,9 +14,7 @@ /// limitations under the License. /// -import * as AngularCore from '@angular/core'; -import { Injectable, NgModule } from '@angular/core'; -import * as AngularRouter from '@angular/router'; +import { Inject, Injectable, NgModule, Optional } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, @@ -31,52 +29,15 @@ import { import { EntitiesTableComponent } from '../../components/entity/entities-table.component'; import { Authority } from '@shared/models/authority.enum'; import { RuleChainsTableConfigResolver } from '@modules/home/pages/rulechain/rulechains-table-config.resolver'; -import * as RxJs from 'rxjs'; import { Observable } from 'rxjs'; -import * as RxJsOperators from 'rxjs/operators'; import { BreadCrumbConfig, BreadCrumbLabelFunction } from '@shared/components/breadcrumb'; import { ResolvedRuleChainMetaData, RuleChain } from '@shared/models/rule-chain.models'; import { RuleChainService } from '@core/http/rule-chain.service'; import { RuleChainPageComponent } from '@home/pages/rulechain/rulechain-page.component'; import { RuleNodeComponentDescriptor } from '@shared/models/rule-node.models'; import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard'; - -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 AngularMaterialChips from '@angular/material/chips'; -import * as AngularMaterialAutocomplete from '@angular/material/autocomplete'; -import * as AngularMaterialDialog from '@angular/material/dialog'; -import * as NgrxStore from '@ngrx/store'; -import * as TranslateCore from '@ngx-translate/core'; -import * as TbCore from '@core/public-api'; import { ItemBufferService } from '@core/public-api'; -import * as TbShared from '@shared/public-api'; -import * as TbHomeComponents from '@home/components/public-api'; -import * as _moment from 'moment'; - -declare const SystemJS; - -const ruleNodeConfigResourcesModulesMap = { - '@angular/core': SystemJS.newModule(AngularCore), - '@angular/common': SystemJS.newModule(AngularCommon), - '@angular/forms': SystemJS.newModule(AngularForms), - '@angular/router': SystemJS.newModule(AngularRouter), - '@angular/cdk/keycodes': SystemJS.newModule(AngularCdkKeycodes), - '@angular/cdk/coercion': SystemJS.newModule(AngularCdkCoercion), - '@angular/material/chips': SystemJS.newModule(AngularMaterialChips), - '@angular/material/autocomplete': SystemJS.newModule(AngularMaterialAutocomplete), - '@angular/material/dialog': SystemJS.newModule(AngularMaterialDialog), - '@ngrx/store': SystemJS.newModule(NgrxStore), - rxjs: SystemJS.newModule(RxJs), - 'rxjs/operators': SystemJS.newModule(RxJsOperators), - '@ngx-translate/core': SystemJS.newModule(TranslateCore), - '@core/public-api': SystemJS.newModule(TbCore), - '@shared/public-api': SystemJS.newModule(TbShared), - '@home/components/public-api': SystemJS.newModule(TbHomeComponents), - moment: SystemJS.newModule(_moment) -}; +import { MODULES_MAP } from '@shared/public-api'; @Injectable() export class RuleChainResolver implements Resolve { @@ -105,11 +66,12 @@ export class ResolvedRuleChainMetaDataResolver implements Resolve> { - constructor(private ruleChainService: RuleChainService) { + constructor(private ruleChainService: RuleChainService, + @Optional() @Inject(MODULES_MAP) private modulesMap: {[key: string]: any}) { } resolve(route: ActivatedRouteSnapshot): Observable> { - return this.ruleChainService.getRuleNodeComponents(ruleNodeConfigResourcesModulesMap); + return this.ruleChainService.getRuleNodeComponents(this.modulesMap); } } diff --git a/ui-ngx/src/app/shared/models/constants.ts b/ui-ngx/src/app/shared/models/constants.ts index f2c51f0d76..5e8665c655 100644 --- a/ui-ngx/src/app/shared/models/constants.ts +++ b/ui-ngx/src/app/shared/models/constants.ts @@ -14,6 +14,8 @@ /// limitations under the License. /// +import { InjectionToken } from '@angular/core'; + export const Constants = { serverErrorCode: { general: 2, @@ -214,3 +216,5 @@ export const contentTypesMap = new Map( ); export const customTranslationsPrefix = 'custom.'; + +export const MODULES_MAP = new InjectionToken<{[key: string]: any}>('ModulesMap');