Angular 19 Micro-Frontend Architecture with Module Federation

Introduction

Micro-frontends extend the microservices philosophy to the browser. Instead of a monolithic Angular application, each team owns and independently deploys a self-contained Angular shell. Module Federation — originally a Webpack 5 feature, now first-class in Angular 19 — makes this possible without iframes or complex routing hacks.

Why Micro-Frontends?

Large Angular applications suffer from the same problems as monoliths: long build times, risky deployments, and team coupling. Micro-frontends solve these by:

• Independent deployment — deploy the auth MFE without touching the article viewer
• Technology isolation — one MFE can upgrade to a new Angular version without blocking others
• Team autonomy — separate CI/CD pipelines per feature area

Angular 19 Application Builder

Angular 19 ships with the @angular/build:application builder (based on esbuild), replacing the legacy Webpack builder. Key improvements:

• 3–5× faster production builds
• First-class SSR support with renderApplication()
• Built-in image optimisation
• Partial hydration (experimental)

Module Federation Setup

Define the host shell and remote MFEs in angular.json:

{
  "federation": {
    "name": "shell",
    "remotes": [
      { "name": "authEditor", "entry": "https://example.com/editor/remoteEntry.js" },
      { "name": "articleViewer", "entry": "https://example.com/viewer/remoteEntry.js" }
    ]
  }
}

Shared Services via Cross-MFE Communication

MFEs on different origins cannot share Angular services directly. The YourOrg platform uses three patterns:

1. Hash fragment tokens — JWT passed via URL hash when navigating between MFEs
2. localStorage events — custom storage events broadcast auth state changes
3. OAuth2 PKCE — each MFE initiates its own PKCE flow against the shared auth server

SSR with Angular Universal

The article viewer MFE uses Server-Side Rendering for SEO. Angular 19's RenderMode.Server renders every route fresh on the server:

export const serverRoutes: ServerRoute[] = [
  { path: '**', renderMode: RenderMode.Server }
];

The Express server uses renderApplication() with the SSR bootstrap module, served behind nginx which proxies /articles to the Node.js process.

Cloudflare Tunnel for Self-Hosted Auth

The OAuth2 auth server runs on a home Ubuntu machine. Cloudflare Tunnel exposes it at auth.example.com without opening inbound ports — the tunnel maintains outbound connections to Cloudflare's edge, which proxies inbound requests through.

Conclusion

Angular 19 + esbuild + SSR makes micro-frontend architecture production-viable for small teams. Keep MFE boundaries aligned with user journeys rather than technical layers, and invest early in a shared auth contract to avoid token-passing complexity later.