Illustrative Setup

The demo follows the familiar pattern: a shell application loads a single micro frontend component. Both the shell and the embedded micro frontend are pre-rendered on the server, as shown in the accompanying video.

Acknowledgments

The server-side implementation of Native Federation relies on Import Maps. This solution incorporates a fork of Joel Denning's node-loader/import-maps package. Credit for this essential piece belongs to Joel, whose continuous innovations significantly advance the micro frontend ecosystem.

Integrating SSR and Native Federation

When @angular/ssr is installed prior to Native Federation, the latter's ng-add schematic automatically establishes the necessary connections between the two. The commands below assume an Angular workspace containing both a shell and a mfe1 project:

# Add Micro Frontend
ng add @angular/ssr --project mfe1
ng add @angular-architects/native-federation --project mfe1 --type remote --port 4201

# Add Shell
ng add @angular/ssr --project shell
ng add @angular-architects/native-federation --project shell --type dynamic-host --port 4200

In cases where Native Federation was set up first, it may be necessary to temporarily uninstall it to ensure the @angular/ssr schematics execute without interference:

# Remove Micro Frontend and Shell
ng g @angular-architects/native-federation:remove --project mfe1
ng g @angular-architects/native-federation:remove --project shell

# Add Micro Frontend
ng add @angular/ssr --project mfe1
ng add @angular-architects/native-federation --project mfe1 --type remote --port 4201

# Add Shell
ng add @angular/ssr --project shell
ng add @angular-architects/native-federation --project shell --type dynamic-host --port 4200

Key Step: Launching the Server

As of version 20, the build process generates a fstart.mjs script (short for "federation start") located in your dist folder, specifically under dist/project-name/server. This script, rather than the standard server.mjs, is the one to execute:

node fstart.mjs

This launcher first initializes federation on the server side and then delegates to the conventional server.mjs produced by the Angular CLI.

Upgrading to Version 20

When migrating to v20, if your project still contains both a server.ts and a bootstrap.server.ts file, you can safely remove server.ts and then rename bootstrap.server.ts to server.ts.

Constraint with ng serve

Due to inherent technical constraints, using ng serve will only load the micro frontend into the shell on the client side. In contrast, a production build executed with ng build performs full server-side rendering. To prevent errors during ng serve, it is advisable to include a server-side fallback for the dynamically loaded module. The loadRemoteModule function now supports a dedicated fallback property for this purpose:

import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation';
import { DummyComponent } from './dummy/dummy.component';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
 {
        path: '',
        pathMatch: 'full',
        component: HomeComponent
 },
 {
        path: 'mfe1',
        loadComponent: () => loadRemoteModule({
            remoteName: 'mfe1',
            exposedModule: './Component',
            fallback: DummyComponent
 })
 }
];

This fallback could be as simple as a component with an empty template, or it might involve a routing configuration that directs all unmatched routes to such a placeholder component.

While this limitation is on the roadmap for removal, it rarely acts as a significant blocker. SSR is primarily a production concern, and developers typically focus on their own micro frontend during development. Additionally, having a fallback strategy is a sensible practice regardless.

SSR for the Shell Only

Although it is entirely possible to enable SSR and hydration for both the shell and individual micro frontends, it is often unnecessary to do so for the micro frontends, especially when they are always accessed through the shell. In such setups, the shell performs the server-side rendering on their behalf, simplifying the overall architecture.

Final Thoughts

SSR support has been included in @angular-architects/native-federation since version 18.2.3. When the ng-add schematic detects an existing SSR setup, it automatically applies the necessary server-side modifications.

Deeper Dive: Angular Architecture Workshop (Online, Interactive, Advanced)

Enhance your skills in building scalable, enterprise-ready Angular applications through our Angular Architecture workshop!SSR and Hydration with Native Federation for Angular — figure 1

English Version | German Version