fix: add location observer to fix webcomponent routing (#310)

onecx · Jul 4, 2024 · 9ab9389 · 9ab9389
1 parent 756ec90
commit 9ab9389
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts b/libs/angular-webcomponents/src/lib/utils/webcomponent-bootstrap.utils.ts
@@ -115,9 +115,15 @@ function connectMicroFrontendRouter(injector: Injector) {
 }
 
 function connectRouter(router: Router): void {
-  const url = `${location.pathname.substring(getLocation().deploymentPath.length)}${location.search}`
-  router.navigateByUrl(url)
-  window.addEventListener('popstate', () => {
-    router.navigateByUrl(url)
-  })
+  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 })
 }