⚙️ Angular Module Federation – Microfrontends richtig gemacht

(Skalierbare Frontends für Teams & Features – ohne monolithisches Chaos)

Mit Angular + Module Federation bringst du das Prinzip der Microservices ins Frontend.
Ermögliche unabhängig deploybare Module, entwickle in Teams parallel – und lass deine App dabei performen.

1️⃣ Was ist Module Federation?

Module Federation ist ein Konzept aus Webpack 5:

Lade Teile deiner App zur Laufzeit aus anderen Apps – remote & flexibel.

💡 Stell dir vor: Jedes Team baut ein Feature, das zur Laufzeit ins Hauptprojekt geladen wird – ohne Rebuilds.

2️⃣ Warum lohnt sich das?

• ✅ Team-unabhängige Entwicklung
• ✅ Schnelleres Deployment & Testing
• ✅ Modulare Architektur
• ✅ Mehrere Apps in einer Oberfläche

3️⃣ Beispiel Setup mit Angular + Nx

npx create-nx-workspace@latest
# App mit Host & Remote
nx generate @nrwl/angular:host shell
nx generate @nrwl/angular:remote dashboard --host=shell

In webpack.config.js des Hosts:

remotes: {
  dashboard: 'dashboard@http://localhost:4201/remoteEntry.js'
}

Im Remote:

exposes: {
  './Module': './src/app/dashboard/dashboard.module.ts',
}

4️⃣ Use Cases

5️⃣ Herausforderungen

• ❗️ Versionierung & Kompatibilität
• ❗️ Lazy Loading + Routing
• ❗️ Shared Dependencies (Singletons!)

💡 Lösung: Federated Angular Libs + Nx + @angular-architects/module-federation

Fazit

Angular + Module Federation ist ein Power-Tool für moderne Enterprise-Architektur.
Richtig eingesetzt, bekommst du maximale Skalierbarkeit – und zufriedene Teams.

📚 Nächster Beitrag:
🎨 Angular Theming – Dark/Light Mode & Dynamic Styles