feat: add micro-frontend example using @module-federation/vite

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
+          version: 11
 
       - uses: actions/setup-node@v6
         with:

.github/workflows/deploy.yml

@@ -34,18 +34,18 @@ jobs:
     environment: production
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
+          version: 11
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: pnpm
 
-      - uses: actions/setup-dotnet@v4
+      - uses: actions/setup-dotnet@v5
         with:
           dotnet-version: 10.0.x
 
@@ -58,9 +58,19 @@ jobs:
       - name: Build API (Release)
         run: pnpm build:api:prod
 
+      - name: Build counter-remote (production)
+        run: pnpm nx build counter-remote --configuration production
+
       - name: Build web app (production)
+        env:
+          COUNTER_REMOTE_ENTRY: /counter-remote/remoteEntry.js
         run: pnpm build:web-app:prod
 
+      - name: Copy counter-remote output into web-app output
+        run: |
+          mkdir -p dist/apps/web-app/client/counter-remote
+          cp -r dist/apps/counter-remote/* dist/apps/web-app/client/counter-remote/
+
       # The .NET app serves the Angular SPA from apps/web-app/client/ relative
       # to its working directory (see Program.cs PhysicalFileProvider). Both
       # outputs land in dist/ with the correct structure:

.github/workflows/preview.yml

@@ -18,23 +18,33 @@ jobs:
       contents: read
       pull-requests: write # SWA deploy posts preview URL comment
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
+          version: 11
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version: 24
           cache: pnpm
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build counter-remote (production)
+        run: pnpm nx build counter-remote --configuration production
+
       - name: Build web app (preview)
+        env:
+          COUNTER_REMOTE_ENTRY: /counter-remote/remoteEntry.js
         run: pnpm nx build web-app --configuration preview
 
+      - name: Copy counter-remote output into web-app output
+        run: |
+          mkdir -p dist/apps/web-app/client/counter-remote
+          cp -r dist/apps/counter-remote/* dist/apps/web-app/client/counter-remote/
+
       - name: Copy SWA routing config
         run: cp apps/web-app/src/staticwebapp.config.json dist/apps/web-app/client/
 

README.md

@@ -10,6 +10,7 @@ A full-stack demo using an [Nx monorepo](https://nx.dev) with [Angular](https://
 - **Notification center** — persistent notification panel with unread count, mark-as-read, dismiss, and action support (e.g. one-click reload on SW update)
 - **PWA / service worker** — offline support; notifies users when a new app version is available with an in-app prompt to reload
 - **Markdown content pages** — [Analog.js](https://analogjs.org) content feature renders pages from Markdown files with frontmatter support (see the [About](/about) page for a live demo)
+- **Counter micro frontend** — the Counter feature runs as a separate [Module Federation](https://module-federation.io/) remote (`counter-remote`), demonstrating micro-frontend architecture with shared singleton libraries
 - **Debug page** (`/debug`) — trigger test notifications and inspect service worker update state during development
 - **PR preview deployments** — every pull request gets a live preview URL via Azure Static Web Apps
 
@@ -23,6 +24,7 @@ A full-stack demo using an [Nx monorepo](https://nx.dev) with [Angular](https://
 - [Analog.js](https://analogjs.org) — Vite-native Angular meta-framework; used for file-based Markdown content pages
 - [Tailwind CSS v4](https://tailwindcss.com) — utility-first styling
 - [Angular PWA](https://angular.dev/ecosystem/service-workers) — service worker & offline support
+- [Module Federation](https://module-federation.io/) (`@module-federation/vite`) — micro-frontend architecture
 
 **Backend**
 
@@ -63,6 +65,33 @@ pnpm start
 
 Starts both the .NET API and Angular app in dev mode. Open [http://localhost:4200](http://localhost:4200) for the app, or [https://localhost:60254/swagger](https://localhost:60254/swagger) for the API docs.
 
+## Micro-frontend development
+
+The Counter feature is a [Module Federation](https://module-federation.io/) micro-frontend remote. To develop with the MFE active, start both servers in separate terminals:
+
+```bash
+# Terminal 1 — remote (port 4201)
+pnpm nx serve counter-remote
+
+# Terminal 2 — host (port 4200)
+pnpm nx serve web-app
+```
+
+The host at `http://localhost:4200` will load the Counter remote automatically from `http://localhost:4201/remoteEntry.js` when you navigate to `/mfe-counter`.
+
+### Architecture
+
+| App              | Role       | Port | Description                                   |
+| ---------------- | ---------- | ---- | --------------------------------------------- |
+| `web-app`        | MFE host   | 4200 | Main application shell                        |
+| `counter-remote` | MFE remote | 4201 | Counter feature exposed via Module Federation |
+
+**Shared singletons** — Angular core, CDK/Material, and NgRx are configured as Module Federation singletons so both apps share a single instance. This prevents Angular's NG0912 component-ID collision warnings that occur when the same component class is registered twice.
+
+**Remote self-containment** — workspace libs (`@myorg/shared`, `@myorg/counter`) are NOT in the MF shared config because Rolldown's static analysis cannot enumerate `export *` chains from TypeScript path aliases. Instead, the remote is designed to be self-contained: `counter-remote` bundles only `@myorg/counter` (which has no `@myorg/shared` dependencies), and the host bundles `@myorg/shared` exclusively (no duplicate registrations).
+
+**Preview deployments** — in CI, `counter-remote` is built and served from `/counter-remote/` within the same Static Web App as the host. The `COUNTER_REMOTE_ENTRY` environment variable is set to `/counter-remote/remoteEntry.js` during the host build so the baked-in import map points to the co-deployed remote instead of `localhost`.
+
 ## Lint
 
 ```bash

apps/counter-remote/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Counter Remote</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body class="m-0">
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

apps/counter-remote/project.json

@@ -0,0 +1,52 @@
+{
+  "name": "counter-remote",
+  "$schema": "../../node_modules/nx/schemas/project.schema.json",
+  "sourceRoot": "apps/counter-remote/src",
+  "projectType": "application",
+  "tags": ["type:app"],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/counter-remote"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "continuous": true,
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "counter-remote:build",
+        "port": 4201
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "counter-remote:build:development"
+        },
+        "production": {
+          "buildTarget": "counter-remote:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{projectRoot}/../../coverage/apps/counter-remote"],
+      "options": {
+        "reportsDirectory": "{projectRoot}/../../coverage/apps/counter-remote"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

apps/counter-remote/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import {
+  ApplicationConfig,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZonelessChangeDetection(),
+    provideHttpClient(withFetch()),
+    provideRouter(routes),
+  ],
+};

apps/counter-remote/src/app/app.routes.ts

@@ -0,0 +1,7 @@
+import { Route } from '@angular/router';
+import { counterRoutes } from '@myorg/counter';
+
+export const routes: Route[] = [
+  ...counterRoutes,
+  { path: '**', redirectTo: '' },
+];

apps/counter-remote/src/app/app.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  template: `<router-outlet />`,
+  host: { 'data-testid': 'app-root' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {}

apps/counter-remote/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(App, appConfig).catch(console.error);

apps/counter-remote/src/remote-routes.ts

@@ -0,0 +1 @@
+export { counterRoutes } from '@myorg/counter';

apps/counter-remote/src/test-setup.ts

@@ -0,0 +1 @@
+import '@myorg/shared/test-setup.shared';

apps/counter-remote/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vite/client", "vite-plugin-pwa/client"],
+    "moduleResolution": "bundler"
+  },
+  "files": ["src/main.ts", "src/remote-routes.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["vite.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/counter-remote/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "typeCheckHostBindings": true
+  }
+}

apps/counter-remote/tsconfig.spec.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "vite-plugin-pwa/client",
+      "node",
+      "vitest"
+    ],
+    "isolatedModules": true
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ],
+  "files": ["src/test-setup.ts"]
+}