Issues with deep routing refresh (F5) in Angular 21 + Native Federation + SSR

[CarmenBM]

For which library do you need help?

native-federation

Question

Hi everyone,
I am building a Microfrontend architecture using Angular 21, @angular-architects/native-federation (v21.2.3), and Nx (v22.6.5). My Shell application has SSR enabled (outputMode: "server" with AngularNodeAppEngine), but Client Hydration is explicitly disabled due to a core Angular hydration error.

I am running into a 404 / Cannot GET error when refreshing the page (F5) on any nested sub-route belonging to a remote microfrontend.

Architectural Context & Behavior
Client-side navigation works perfectly: If I start at the Shell home page, navigate to the remote mfe-one via the Shell menu, and then click a link inside the remote template to a sub-page (/mfe-one/sub-page), everything renders correctly.

Page Refresh breaks: If I hit F5 on http://localhost:4200/mfe-one/sub-page, the browser throws a native server error: Cannot GET /mfe-one/sub-page.

The Core Problem:
When hitting F5 on a sub-route, the Shell's server router fails to match the path against its local routes, and instead of falling back to the SPA index.html to let the client handle it, it terminates with a 404.

Configuration & Code Sandbox

1. Federation Setup

Remote (mfe-one) configuration:

module.exports = withNativeFederation({
  name: 'mfe-one',
  exposes: {
    './Component': './apps/mfe-one/src/app/app.ts',
    './Routes': './apps/mfe-one/src/app/app.routes.ts',
  },
});

Shell main.ts initialization:

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

initFederation({
  'mfe-one': 'http://localhost:4202/remoteEntry.json',
});

2. Routing Setup
   Shell Routes (apps/shell/src/app/app.routes.ts):

export const appRoutes: Route[] = [
  { path: '', component: Home },
  {
    path: 'mfe-one',
    loadChildren: () =>
      loadRemoteModule({
        remoteName: 'mfe-one',
        exposedModule: './Routes',
      })
      .then((m) => m.appRoutes)
      .catch(() => [{ path: '', component: Home }]),
  },
];

Remote Routes (apps/mfe-one/src/app/app.routes.ts):

export const appRoutes: Route[] = [
  { path: '', component: MfeOneMainComponent }, // Base catch for /mfe-one
  { path: 'sub-page', component: MfeOneSubPageComponent }, // Target /mfe-one/sub-page
];

3. Server Routes Config (app.routes.server.ts in Shell)
   I am trying to use RenderMode.Client to bypass SSR for the remote's sub-routes, but it gets ignored by the DevServer:

export const serverRoutes: ServerRoute[] = [
  { path: 'mfe-one/**', renderMode: RenderMode.Client }, 
  { path: '**', renderMode: RenderMode.Server },
];

Navigation Templates (HTML)
This is how navigation happens between components.

From MfeOneMainComponent to MfeOneSubPageComponent (Works perfectly on-click):

<div class="col-12 col-md-4 col-lg mb-2">
  <button type="button" class="btn btn-primary w-100" [routerLink]="['./sub-page']">
    Go to Sub-Page
  </button>
</div>

From MfeOneSubPageComponent back to MfeOneMainComponent (Works perfectly on-click):

<a [routerLink]="['/mfe-one']" [queryParams]="{ Filters: 1 }">
  <i class="bi bi-arrow-left"></i> Back to Main MFE
</a>

Important Note: Client Hydration is Disabled
In the Shell's app.config.ts, I had to comment out provideClientHydration() because of a recurring Angular 21 hydration bug that happens even if I decouple all microfrontends entirely:

export const appConfig: ApplicationConfig = {
  providers: [
    // provideClientHydration(withEventReplay()), // DISABLED DUE TO INTERNAL ERROR
  ]
};

The runtime error when hydration is enabled:

_effect-chunk2.mjs:2652 ERROR TypeError: Cannot create property 'hydratedNodes' on boolean 'true'
    at markRNodeAsClaimedByHydration (_debug_node-chunk.mjs:2564:10)
    at retrieveHydrationInfoImpl (_debug_node-chunk.mjs:2494:3)
    at retrieveHydrationInfo (_debug_node-chunk.mjs:2502:10)
    at renderComponent (_debug_node-chunk.mjs:5710:35)
    at renderChildComponents (_debug_node-chunk.mjs:5767:5)
    at renderView (_debug_node-chunk.mjs:5750:9)
    at ComponentFactory2.createComponentRef (_debug_node-chunk.mjs:9092:7)
    at ComponentFactory2.create (_debug_node-chunk.mjs:9063:20)
    at _debug_node-chunk.mjs:12716:31
    at NoopNgZone.run (_effect-chunk2.mjs:2622:2)

Question
When running the development server via Nx (npx nx serve mfe-one and npx nx serve Shell), pressing F5 on a deep remote path (/mfe-one/sub-page) results in a 404 error generated by Vite/SSR's internal engine.

If I try to intercept it using custom Express middleware in server.ts during development mode, the development server crashes with an ENOENT error because the development resources are located inside the .angular/vite-root/ cache directory instead of in dist/.

How can I correctly configure the new Angular 21 DevServer or ServerRoutes for all nested subroutes of deferred-loaded remote microfrontends? Does the hydration error affect this?

Any help would be greatly appreciated!