fix: navigation for microrontends

libs/mf-tools/src/lib/web-components/bootstrap-utils.ts

@@ -1,3 +1,4 @@
+import { APP_BASE_HREF } from '@angular/common';
 import {
   CompilerOptions,
   enableProdMode,
@@ -211,11 +212,12 @@ function shareShellZone(injector: Injector) {
 
 function connectMicroFrontendRouter(injector: Injector) {
   const router = injector.get(Router);
+  const baseHref = injector.get(APP_BASE_HREF, '/');
 
   if (!router) {
     console.warn('No router to connect found');
     return;
   }
 
-  connectRouter(router);
+  connectRouter(router, false, baseHref);
 }

libs/mf-tools/src/lib/web-components/router-utils.ts

@@ -20,19 +20,30 @@ export function endsWith(prefix: string): UrlMatcher {
   };
 }
 
-export function connectRouter(router: Router, useHash = false): void {
-  let url: string;
+
+function relativePathName(path: string, baseHref: string) {
+  if (path.startsWith(baseHref)) {
+    path = path.slice(baseHref.length);
+  }
+  return path;
+}
+
+function guessRouterUrl(useHash = false, baseHref: string) {
+  const path = useHash
+    ? location.hash
+    : relativePathName(location.pathname, baseHref);
+  return `${path}${location.search}`;
+}
+
+export function connectRouter(router: Router, useHash = false, baseHref = '/') {
+  void router.navigateByUrl(guessRouterUrl(useHash, baseHref));
   if (!useHash) {
-    url = `${location.pathname.substr(1)}${location.search}`;
-    router.navigateByUrl(url);
     window.addEventListener('popstate', () => {
-      router.navigateByUrl(url);
+      void router.navigateByUrl(guessRouterUrl(useHash, baseHref));
     });
   } else {
-    url = `${location.hash.substr(1)}${location.search}`;
-    router.navigateByUrl(url);
     window.addEventListener('hashchange', () => {
-      router.navigateByUrl(url);
+      void router.navigateByUrl(guessRouterUrl(useHash, baseHref));
     });
   }
 }