Tutorial

Step-by-step tutorial for setting up Native Federation v4 with Angular 22 — configure a host and remote, share dependencies, and load Micro Frontends at runtime with the Orchestrator.

Set up a complete Micro Frontend architecture with Native Federation from scratch. You'll create a host (shell) and a remote (Micro Frontend) that load shared dependencies at runtime — on Angular 22 with the v4 adapter and the Orchestrator runtime.

Prerequisites

• Angular CLI 20 or higher — this tutorial targets Angular 22
• Node.js (LTS recommended)

1. Create the Workspace

v4 has no dedicated starter branch, so scaffold a fresh workspace with two applications: a shell (the host) and a Micro Frontend called mfe1 (the remote).

ng new mf-tutorial --no-create-application

cd mf-tutorial

ng generate application shell --routing
ng generate application mfe1 --routing

On Angular 22 both applications are standalone and zoneless by default — exactly what Native Federation expects.

2. Install Native Federation

npm i @angular-architects/native-federation -D

The package pulls in @softarc/native-federation (^4.3.0) and @softarc/native-federation-orchestrator (^4.5.0). The init step below also adds es-module-shims and rewires your build targets — nothing else to install up front.

3. Initialize the Remote

Configure mfe1 as a remote that exposes components:

ng g @angular-architects/native-federation:init --project mfe1 --port 4201 --type remote

4. Initialize the Host

Configure the shell as a dynamic host that reads remote configuration at runtime:

ng g @angular-architects/native-federation:init --project shell --port 4200 --type dynamic-host

5. Host Configuration

v4 configuration is ESM — the file is federation.config.mjs and uses import / export default instead of require() / module.exports. The generated host config at projects/shell/federation.config.mjs:

import { withNativeFederation, shareAll } from '@angular-architects/native-federation/config';

export default withNativeFederation({
  name: 'shell',

  shared: {
    ...shareAll(
      { singleton: true, strictVersion: true, requiredVersion: 'auto', build: 'package' },
      {
        overrides: {
          '@angular/core': {
            singleton: true,
            strictVersion: true,
            requiredVersion: 'auto',
            build: 'package',
            includeSecondaries: { keepAll: true },
          },
        },
      },
    ),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ],

  features: {
    // ignoreUnusedDeps is enabled by default now
    denseChunking: true,
  },
});

6. Remote Configuration

The generated remote config at projects/mfe1/federation.config.mjs is the same, plus an exposes block:

import { withNativeFederation, shareAll } from '@angular-architects/native-federation/config';

export default withNativeFederation({
  name: 'mfe1',

  exposes: {
    './Component': './projects/mfe1/src/app/app.component.ts',
  },

  shared: {
    ...shareAll(
      { singleton: true, strictVersion: true, requiredVersion: 'auto', build: 'package' },
      {
        overrides: {
          '@angular/core': {
            singleton: true,
            strictVersion: true,
            requiredVersion: 'auto',
            build: 'package',
            includeSecondaries: { keepAll: true },
          },
        },
      },
    ),
  },

  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Add further packages you don't need at runtime
  ],

  features: {
    denseChunking: true,
  },
});

7. Host Bootstrap

The generated projects/shell/src/main.ts initializes federation with the Orchestrator — v4's recommended runtime — before loading Angular:

import { initFederation } from '@softarc/native-federation-orchestrator';
import {
  useShimImportMap,
  consoleLogger,
  globalThisStorageEntry,
} from '@softarc/native-federation-orchestrator/options';

initFederation('/assets/federation.manifest.json', {
  ...useShimImportMap({ shimMode: true }),
  logger: consoleLogger,
  storage: globalThisStorageEntry,
  hostRemoteEntry: './remoteEntry.json',
  logLevel: 'debug',
})
  .catch((err) => console.error(err))
  .then((_) => import('./bootstrap'))
  .catch((err) => console.error(err));

8. Federation Manifest

The manifest at projects/shell/src/assets/federation.manifest.json maps remote names to their entry points:

{
  "mfe1": "http://localhost:4201/remoteEntry.json"
}

9. Remote Bootstrap

The remote's projects/mfe1/src/main.ts initializes federation through the Angular adapter:

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

initFederation()
  .catch((err) => console.error(err))
  .then((_) => import('./bootstrap'))
  .catch((err) => console.error(err));

10. Load the Remote

Add a lazy route to the shell's routing configuration at projects/shell/src/app/app.routes.ts. Loading a remote is plain Angular lazy-loading with loadRemoteModule in place of a dynamic import():

import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full',
  },
  {
    path: 'flights',
    loadComponent: () =>
      loadRemoteModule('mfe1', './Component').then((m) => m.AppComponent),
  },
  {
    path: '**',
    component: NotFoundComponent,
  },
];

11. Run the Application

Start the remote first:

ng serve mfe1 -o

Once it's running, start the shell in another terminal:

ng serve shell -o

Navigate to the flights route to load the remote component into the host. The Micro Frontend is loaded at runtime — the shell had no knowledge of it at build time.

What's Next?

• Angular Adapter — Getting Started
• Set up SSR & Hydration
• Combine with Module Federation
• Frequently Asked Questions