Micro Frontend (MFE) Architecture with Angular & Nx

Question

To fully understand Micro Frontends (MFEs), especially with Angular + Nx + Module Federation, it's helpful to look at a layered architecture diagram and explanation of each piece.

---

Here’s a high-level conceptual architecture:

                           ┌────────────────────────┐
                           │       Shell App        │
                           │ (App Host/Container)   │
                           └────────────┬───────────┘
                                        │
       ┌────────────────────────────────┼─────────────────────────────────┐
       ▼                                ▼                                 ▼
┌────────────┐                ┌────────────────┐               ┌────────────────┐
│ Product MFE│                │ Checkout MFE   │               │ Profile MFE    │
│ (Remote)   │                │ (Remote)       │               │ (Remote)       │
└────────────┘                └────────────────┘               └────────────────┘

  │                                  │                                  │
  ▼                                  ▼                                  ▼
┌──────────────────┐     ┌────────────────────┐         ┌────────────────────┐
│ Feature Module(s)│     │ Feature Module(s)  │         │ Feature Module(s)  │
│ - Routing        │     │ - Routing          │         │ - Routing          │
│ - UI Components  │     │ - UI Components    │         │ - UI Components    │
└──────────────────┘     └────────────────────┘         └────────────────────┘

                   Shared Libraries (e.g., libs/ui, libs/auth, libs/api)
                   └─────────────────────────────────────────────────────┘

---

Key Building Blocks

1. Shell App (Host)

• Acts as the entry point to the entire system.
• Loads remote MFEs via Webpack Module Federation.
• Defines global routing and layout (e.g. header, nav).

Example:

{
  path: 'product',
  loadChildren: () =>
    loadRemoteModule('product', './Module').then((m) => m.ProductModule),
}

---

2. Remote Apps (MFEs)

Each MFE:

• Is a standalone Angular app.
• Exposes one or more modules (via exposes in module-federation.config.ts).
• Has its own routing, logic, and optionally independent deployment.

Example:

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

---

3. Feature Modules

• Encapsulated functionality for that domain (e.g. ProductModule, CheckoutModule).
• Follows Angular's modular architecture.
• Supports lazy loading.

---

4. Shared Libraries (libs/)

• Cross-cutting concerns like UI components, auth services, or API clients.

• You can create domain-specific libraries like:

  libs/ui
  libs/data-access/orders
  libs/shared/auth
  

• Helps enforce Domain-Driven Design (DDD) and code boundaries.

---

Deployment Models

Option A: Unified Deployment

• All MFEs deployed together.
• Shell and remotes served from the same domain (monorepo).
• Simpler CI/CD.

Option B: Independent Deployment

• Each MFE has its own CI/CD and hosting.
• Shell loads them from remote URLs (e.g. S3, Vercel).
• True autonomy and scalability.

remotes: [
  ['product', 'https://product.domain.com/remoteEntry.js'],
]

---

Advantages of This Architecture

Benefit	Explanation
Independent Teams	Teams can work and deploy separately.
Faster Builds	Smaller builds due to separation.
Reusable Modules	Use shared libraries without duplication.
Lazy Loading	Improves initial load time.
Clear Domain Boundaries	Encourages DDD and maintainability.

---

Recommended Nx Workspace Folder Structure

apps/
  shell/           ← host application
  product/         ← remote MFE
  checkout/        ← remote MFE
libs/
  ui/              ← shared UI components
  auth/            ← authentication logic
  data-access/     ← shared API calls
  shared/utils/    ← utility functions

---