diff --git a/frontend/src/ts/mfe-app-tools.ts b/frontend/src/ts/mfe-app-tools.ts index 545638ff..8bfa8825 100644 --- a/frontend/src/ts/mfe-app-tools.ts +++ b/frontend/src/ts/mfe-app-tools.ts @@ -1,6 +1,5 @@ -import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; import {MfeConfigurationProvider} from "./modules/mfe/provider/mfe-configuration.provider"; -import {NgModuleRef} from "@angular/core"; +import {NgModuleRef, PlatformRef} from "@angular/core"; let childEventHandlerFromContainer = null; @@ -25,6 +24,8 @@ export function fireMfeEventToContainer(eventType: ChildEventType, eventData: an } export function bootstrapMfeApp(createApp: () => Promise | void>) { + let platformRef: PlatformRef = null; + function mount( element: HTMLElement, settings: { @@ -44,17 +45,23 @@ export function bootstrapMfeApp(createApp: () => Promise | let startUrl = settings.startUrl || ''; // ресурс хост-приложения MfeConfigurationProvider.setPageBaseUrl(joinPath(containerBaseUrl, startUrl)); - element.appendChild(createContainerForBootstrap()) - + element.appendChild(createContainerForBootstrap()); childEventHandlerFromContainer = settings.childEventHandler; - createApp(); + createApp().then(ref => { + if (ref) { + platformRef = ref.injector.get(PlatformRef); + } + }); + return { parentEventHandler(eventType: ParentEventType, url: string) { }, unmount() { - console.log("Unmounting account-applications application"); - platformBrowserDynamic().destroy(); + if (platformRef) { + platformRef.destroy(); + platformRef = null; + } }, } } diff --git a/frontend/src/ts/modules/mfe/component/mfe-webbpm.component.ts b/frontend/src/ts/modules/mfe/component/mfe-webbpm.component.ts index 4e3a513c..47d1dc47 100644 --- a/frontend/src/ts/modules/mfe/component/mfe-webbpm.component.ts +++ b/frontend/src/ts/modules/mfe/component/mfe-webbpm.component.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from "@angular/core"; +import {Component, OnDestroy, ViewEncapsulation} from "@angular/core"; import { Event, NavigationCancel, @@ -8,6 +8,7 @@ import { Router } from "@angular/router"; import {ProgressIndicationService} from "@webbpm/base-package"; +import {Subscription} from "rxjs"; @Component({ @@ -17,21 +18,32 @@ import {ProgressIndicationService} from "@webbpm/base-package"; templateUrl: './../../../../../src/resources/template/webbpm/mfe-webbpm.html', styleUrls: ['./../../../../../src/resources/css/style.css'], }) -export class MfeWebbpmComponent { +export class MfeWebbpmComponent implements OnDestroy { public headerVisible: boolean = true; public footerVisible: boolean = true; + private subscription: Subscription; constructor(private router: Router, private progressIndicationService: ProgressIndicationService) { - router.events.subscribe((event: Event) => { - if (event instanceof NavigationStart) { - progressIndicationService.showProgressBar(); - } - else if (event instanceof NavigationEnd - || event instanceof NavigationError - || event instanceof NavigationCancel) { - progressIndicationService.hideProgressBar(); - } + this.subscription = router.events.subscribe((event: Event) => { + this.handleRouterEvent(event); }) } + + private handleRouterEvent(event: Event): void { + if (event instanceof NavigationStart) { + this.progressIndicationService.showProgressBar(); + } + else if ( + event instanceof NavigationEnd + || event instanceof NavigationError + || event instanceof NavigationCancel + ) { + this.progressIndicationService.hideProgressBar(); + } + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } } diff --git a/frontend/src/ts/modules/mfe/location/mfe-scoped-location-strategy.service.ts b/frontend/src/ts/modules/mfe/location/mfe-scoped-location-strategy.service.ts new file mode 100644 index 00000000..878db6c4 --- /dev/null +++ b/frontend/src/ts/modules/mfe/location/mfe-scoped-location-strategy.service.ts @@ -0,0 +1,23 @@ +import {PathLocationStrategy} from "@angular/common"; +import {Injectable, OnDestroy} from "@angular/core"; + +@Injectable() +export class MfeScopedLocationStrategy extends PathLocationStrategy implements OnDestroy { + private isDestroyed: boolean = false; + + replaceState(state: any, title: string, url: string, queryParams: string) { + if (!this.isDestroyed) { + super.replaceState(state, title, url, queryParams); + } + } + + pushState(state: any, title: string, url: string, queryParams: string) { + if (!this.isDestroyed) { + super.pushState(state, title, url, queryParams); + } + } + + ngOnDestroy(): void { + this.isDestroyed = true; + } +} \ No newline at end of file diff --git a/frontend/src/ts/modules/mfe/mfe-webbpm.module.ts b/frontend/src/ts/modules/mfe/mfe-webbpm.module.ts index ef90c8ce..784e3566 100644 --- a/frontend/src/ts/modules/mfe/mfe-webbpm.module.ts +++ b/frontend/src/ts/modules/mfe/mfe-webbpm.module.ts @@ -30,6 +30,8 @@ import {DEFAULT_HTTP_INTERCEPTOR_PROVIDERS} from "./interceptor/mfe-default-inte import {MfeOverlayContainer} from "./overlay/mfe-overlay-container.service"; import {PermissionProvider} from "../app/provider/permission.provider"; import {MfePermissionProvider} from "./provider/mfe-permission.provider"; +import {LocationStrategy} from "@angular/common"; +import {MfeScopedLocationStrategy} from "./location/mfe-scoped-location-strategy.service"; let IMPORTS = [ @@ -56,6 +58,7 @@ let IMPORTS = [ ], exports: [], providers: [ + {provide: LocationStrategy, useClass: MfeScopedLocationStrategy}, {provide: AppVersionService, useClass: MfeAppVersionService}, {provide: AppConfigService, useClass: MfeAppConfigService}, {provide: ErrorHandler, useClass: GlobalErrorHandler},