Feature Request: Lifecycle Hooks / Events for Remote Module Loading (Angular Native Federation)

[shankaryadavy9]

When using loadRemoteModule() in Angular routing (loadChildren / loadComponent), the entire navigation is blocked until the remote's remoteEntry.json and subsequent ES modules are fetched and evaluated.

Currently, this loading process happens outside Angular's Router lifecycle and Zone, making it impossible to reliably show a loading indicator (spinner/skeleton/shimmer) while the remote microfrontend is being fetched.

A lifecycle hook or observable event system would allow host applications to display proper loading states during remote module resolution.

---

Problem

When using loadRemoteModule() inside Angular router configuration:

{
  path: 'mfe',
  loadChildren: () =>
    loadRemoteModule({
      type: 'module',
      remoteEntry: 'https://remote.app/remoteEntry.json',
      exposedModule: './Module'
    }).then(m => m.RemoteModule)
}

Navigation fully blocks until:

1. remoteEntry.json is fetched
2. Remote container is initialized
3. All required chunks are loaded via native import()

During this period:

• The host shell component does not render
• No Angular router events correspond to this loading phase
• Native import() calls cannot be intercepted
• There is no place to render a loading UI

As a result, users experience blank screen delays during MFE loading.

---

What We Tried

1. Router Events

router.events.subscribe(...)

Events like:

• NavigationStart
• NavigationEnd

do not correlate with actual MFE loading time, since the router waits internally for loadChildren() to resolve.

---

2. Patching window.fetch

const originalFetch = window.fetch;
window.fetch = (...args) => {
  if (args[0].includes('remoteEntry')) {
    showLoading();
  }
  return originalFetch(...args);
};

Problem:

• Only captures remoteEntry.json
• The slowest part is the subsequent import() calls
• Native import() cannot be intercepted

---

Core Issue

The host shell component does not render until loadChildren() resolves.

Since the remote module loading happens before Angular renders anything:

• There is no DOM available to show loading placeholders
• Even if we intercept remoteEntry.json, Angular renders only after all import() calls finish, making the loading state useless.

---

Proposed Feature

Provide lifecycle events for remote module loading.

---

Option 1 — Global Observable

import { federationEvents$ } from '@angular-architects/native-federation';

federationEvents$.subscribe(event => {
  if (event.type === 'loadStart') showShimmer(event.remoteName);
  if (event.type === 'loadEnd')   hideShimmer(event.remoteName);
});

Example event payload:

type FederationEvent =
  | { type: 'loadStart'; remoteName: string; exposedModule: string }
  | { type: 'loadEnd'; remoteName: string; exposedModule: string }
  | { type: 'loadError'; remoteName: string; error: unknown };

---

Option 2 — Hook inside loadRemoteModule

loadRemoteModule({
  remoteEntry,
  exposedModule,
  onLoadStart: () => showLoader(),
  onLoadEnd: () => hideLoader()
});

---

Option 3 — Angular Router Integration

Expose a router-compatible event:

RouterEvent: RemoteModuleLoadStart
RouterEvent: RemoteModuleLoadEnd

Similar to Angular's:

• RouteConfigLoadStart
• RouteConfigLoadEnd

---

Expected Benefits

This feature would allow:

• Showing spinners/skeletons/shimmer placeholders
• Performance tracking of remote loading
• Error handling for remote module failures
• Better UX when loading microfrontends

---

Environment

Angular: 21
Native Federation: latest
Usage: loadRemoteModule() with loadChildren and loadComponent

---

If useful, I can also provide a reproduction repository demonstrating the issue.

[Aukevanoost]

Hi @shankaryadavy9,

That is a cool idea! I do think it's more something for the new orchestrator. Nevertheless, I think you can (for the time being) wrap the loadRemoteModule function like this?

Example:

import { inject, Type } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeFederationResult } from '@softarc/native-federation-orchestrator';
import { SpinnerService } from './services/spinner.service';

const withLoading = <T>(
  fn: () => Promise<T>,
  spinner?: SpinnerService,
): Promise<T> => {
  spinner?.show();
  return fn().finally(() => spinner?.hide());
};

export const routes = (nf: NativeFederationResult): Routes => [
  {
    path: 'mfe3',
    loadComponent: async () => {
      const spinner = inject(SpinnerService);

      const esModule = await withLoading(() => {
        return nf
          .as<{ AppComponent: Type<unknown> }>()
          .loadRemoteModule('mfe3', './Component');
      }, spinner);

      return esModule.AppComponent;
    },
  }
];

If you want to use the orchestrator, have a look here, I took it as the base for the wrapper example: https://github.com/Aukevanoost/native-federation-examples-ng/blob/main/projects/vnf-host/src/app/app.routes.ts>

Edit: in your case it can even be easier, don't forget to add mfe3 to the manifest if you want to test it.

[shankaryadavy9]

We ran into the same problem — loadChildren blocks navigation so the shell layout never renders during MFE loading, making it impossible to show a shimmer/skeleton inside the layout.

As of now we solved it with a Proxy Component pattern instead of loadChildren:

The idea: assign a plain component (not loadChildren) to each MFE route. Since it's a synchronous component, Angular completes navigation instantly, the shell layout renders, and the shimmer is visible immediately. The proxy then loads the MFE in ngOnInit, injects the real routes into the router config, and replays the original URL.

//routes
const mfeRoutes = MFE_REGISTRY.map(mfe => ({
  path: mfe.path,
  component: MfeRouteProxy,
  data: { remoteName: mfe.name, remoteEntry: mfe.remoteEntry },
}));

// proxy
async ngOnInit() {
  const { remoteName, remoteEntry } = this.route.snapshot.data;
  const targetPath = this.route.snapshot.routeConfig!.path!;
  const currentUrl = this.router.url; // captures deep link URL before loading

  const [routesModule, navModule, helpModule] = await MfeLoaderService.loadAll(
    remoteName, remoteEntry, ['./routes',more]
  );

  this.injectIntoConfig(this.router.config, targetPath, [
    ...routesModule.routes,
   more components
  ]);

  this.router.resetConfig([...this.router.config]);
  await this.router.navigateByUrl(currentUrl, { replaceUrl: true }); // deep link replay
}