adding useInstanceNgZone bootstrap option to run router events inside NgZone

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

@@ -45,6 +45,11 @@ export type Options = {
    * Default value true.
    */
   activeLegacyMode?: boolean;
+  /**
+   * Use platformRef.instance.ngZone to run router events
+   * Default value false.
+   */
+  useInstanceNgZone?: boolean;
 };
 
 declare interface BootstrapOptions {
@@ -193,7 +198,10 @@ export function bootstrap<M>(
       if (options.appType === 'shell') {
         shareShellZone(ref.injector);
       } else if (options.appType === 'microfrontend') {
-        connectMicroFrontendRouter(ref.injector);
+        connectMicroFrontendRouter(
+          ref.injector,
+          options?.useInstanceNgZone ? ref.instance?.ngZone : undefined
+        );
       }
 
       return ref;
@@ -209,7 +217,7 @@ function shareShellZone(injector: Injector) {
   shareNgZone(ngZone);
 }
 
-function connectMicroFrontendRouter(injector: Injector) {
+function connectMicroFrontendRouter(injector: Injector, ngZone: NgZone = undefined) {
   const router = injector.get(Router);
   const useHash = location.href.includes('#');
 
@@ -218,5 +226,5 @@ function connectMicroFrontendRouter(injector: Injector) {
     return;
   }
 
-  connectRouter(router, useHash);
+  connectRouter(router, useHash, ngZone);
 }

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

@@ -1,4 +1,5 @@
 import { Router, UrlMatcher, UrlSegment } from '@angular/router';
+import { NgZone } from '@angular/core';
 
 export function startsWith(prefix: string): UrlMatcher {
   return (url: UrlSegment[]) => {
@@ -20,19 +21,23 @@ export function endsWith(prefix: string): UrlMatcher {
   };
 }
 
-export function connectRouter(router: Router, useHash = false): void {
+function navigateWithNgZone(router: Router, ngZone: NgZone, url: string) {
+  ngZone.run(() => router.navigateByUrl(url));
+}
+
+export function connectRouter(router: Router, useHash = false, ngZone = undefined): void {
   let url: string;
   if (!useHash) {
     url = `${location.pathname.substring(1)}${location.search}`;
-    router.navigateByUrl(url);
+    !!ngZone ? navigateWithNgZone(router, ngZone, url) : router.navigateByUrl(url);
     window.addEventListener('popstate', () => {
-      router.navigateByUrl(url);
+      !!ngZone ? navigateWithNgZone(router, ngZone, url) : router.navigateByUrl(url);
     });
   } else {
     url = `${location.hash.substring(1)}${location.search}`;
-    router.navigateByUrl(url);
+    !!ngZone ? navigateWithNgZone(router, ngZone, url) : router.navigateByUrl(url);
     window.addEventListener('hashchange', () => {
-      router.navigateByUrl(url);
+      !!ngZone ? navigateWithNgZone(router, ngZone, url) : router.navigateByUrl(url);
     });
   }
 }

libs/mf/src/builders/build/builder.ts

@@ -18,4 +18,4 @@ export function runBuilder(
   );
 }
 
-export default createBuilder(runBuilder);
+export default createBuilder(runBuilder) as any;

libs/mf/src/schematics/mf/schematic.ts

@@ -26,7 +26,6 @@ import {
   getPackageJsonDependency,
   NodeDependencyType,
 } from '@schematics/angular/utility/dependencies';
-import { serve } from 'esbuild';
 
 export function add(options: MfSchematicSchema): Rule {
   return config(options);