diff --git a/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts b/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts index fa632e0c..de8b2a64 100644 --- a/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts +++ b/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts @@ -15,6 +15,8 @@ import { } from '@angular/core' import { Router } from '@angular/router' import { getLocation } from '@onecx/accelerator' +import { EventsTopic } from '@onecx/integration-interface' +import { filter } from 'rxjs' /** * Implementation inspired by @angular-architects/module-federation-plugin https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf-tools/src/lib/web-components/bootstrap-utils.ts @@ -56,6 +58,7 @@ export async function bootstrapRemoteComponent( }) cachePlatform(production) + connectMicroFrontendRouter(app.injector, false) const myRemoteComponentAsWebComponent = createCustomElement(component, { injector: app.injector, @@ -103,11 +106,13 @@ function cachePlatform(production: boolean): PlatformRef { return platform } -function connectMicroFrontendRouter(injector: Injector) { +function connectMicroFrontendRouter(injector: Injector, warn: boolean = true) { const router = injector.get(Router) if (!router) { - console.warn('No router to connect found') + if (warn) { + console.warn('No router to connect found') + } return } @@ -117,13 +122,11 @@ function connectMicroFrontendRouter(injector: Injector) { function connectRouter(router: Router): void { const initialUrl = `${location.pathname.substring(getLocation().deploymentPath.length)}${location.search}` router.navigateByUrl(initialUrl) - let lastUrl = location.href - new MutationObserver(() => { - const url = location.href - if (url !== lastUrl) { - lastUrl = url - const routerUrl = `${location.pathname.substring(getLocation().deploymentPath.length)}${location.search}` - router.navigateByUrl(routerUrl) - } - }).observe(document, { subtree: true, childList: true }) + const observer = new EventsTopic(); + observer.pipe(filter((e) => e.type === 'navigated')).subscribe(() => { + const routerUrl = `${location.pathname.substring( + getLocation().deploymentPath.length + )}${location.search}`; + router.navigateByUrl(routerUrl); + }); } diff --git a/libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts b/libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts index 72bbd13d..8cd7f907 100644 --- a/libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts +++ b/libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts @@ -14,6 +14,10 @@ export function initializeRouter(router: Router, appStateService: AppStateServic mfeInfo: mfeInfo, } }) + routes.push({ + path: '**', + children: [], + }) router.resetConfig(routes) }) )