fix: connect remote component router to angular router

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);
+  });
 }

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)
         })
       )