feat: add Angular Rsbuild module federation example

.github/workflows/build-deploy-test.yml

@@ -142,6 +142,13 @@ jobs:
             fi
           done
 
+      - name: Patch Angular Rspack compiler dependencies
+        run: |
+          find node_modules/.pnpm \
+            -path "*/@nx/angular-rspack-compiler/patch/patch-angular-build.js" \
+            -print \
+            -exec node {} \;
+
       - name: Clean zephyr cache before build
         run: |
           echo "Cleaning $HOME/.zephyr directory..."

README.md

@@ -24,6 +24,7 @@ Micro-frontend architecture with Module Federation, Zephyr's core value proposit
 | Example | Framework | Bundler | Complexity |
 |---------|-----------|---------|------------|
 | [Airbnb Clone (Module Federation)](module-federation/airbnb-clone) | react | rspack | advanced |
+| [Angular + Rsbuild Module Federation](module-federation/angular-rsbuild) | angular | rsbuild | intermediate |
 | [Angular + Vite Module Federation](module-federation/angular-vite) | angular | vite | intermediate |
 | [React + Rsbuild Module Federation](module-federation/react-rsbuild) | react | rsbuild | intermediate |
 | [React Multi-Bundler Module Federation](module-federation/react-vite-rspack-webpack) | react | webpack | advanced |

module-federation/angular-rsbuild/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.zephyr
+

module-federation/angular-rsbuild/README.md

@@ -0,0 +1,63 @@
+---
+name: Angular + Rsbuild Module Federation
+slug: module-federation/angular-rsbuild
+description: Angular micro-frontends using Rsbuild Module Federation, deployed with Zephyr Cloud
+framework: angular
+bundler: rsbuild
+features: [module-federation, typescript]
+complexity: intermediate
+---
+
+# Angular + Rsbuild Module Federation
+
+> Angular micro-frontends using Rsbuild Module Federation, deployed with Zephyr Cloud.
+
+## Tech Stack
+
+- Angular 20
+- Rsbuild 1
+- Rspack-powered Angular compilation through `@nx/angular-rsbuild`
+- Module Federation through `@module-federation/rsbuild-plugin`
+- Zephyr Cloud through `zephyr-rsbuild-plugin`
+- TypeScript
+
+## Quick Start
+
+```bash
+npx degit ZephyrCloudIO/zephyr-examples/module-federation/angular-rsbuild my-app
+cd my-app
+pnpm install
+pnpm dev
+```
+
+## What's Inside
+
+- `remote/` exposes `PromoCardComponent` as `angular_rsbuild_remote/PromoCard`
+- `host/` imports the remote component at runtime and renders it with `NgComponentOutlet`
+- Both apps use standalone Angular components, zoneless change detection, Rsbuild, and Module Federation
+- Rsbuild runs the Module Federation plugin and the Zephyr plugin as separate plugins
+- The host declares `zephyr:dependencies` so Zephyr can resolve `angular_rsbuild_remote` during deployment
+
+Angular 20 is used because the current Angular Rsbuild adapters support Angular `>=19 <21`.
+
+Development ports:
+
+- Host: `http://localhost:4200`
+- Remote: `http://localhost:4201`
+- Remote manifest: `http://localhost:4201/mf-manifest.json`
+
+## Deploy
+
+```bash
+pnpm build
+```
+
+`pnpm build` builds the remote first, then the host. Zephyr Cloud deploys during each Rsbuild production build when `ZE_SERVER_TOKEN` is configured.
+
+## Learn More
+
+- [Angular Documentation](https://angular.dev)
+- [Rsbuild Documentation](https://rsbuild.rs)
+- [Rspack Documentation](https://rspack.dev)
+- [Module Federation Documentation](https://module-federation.io)
+- [Zephyr Cloud Docs](https://docs.zephyr-cloud.io)

module-federation/angular-rsbuild/host/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.zephyr
+

module-federation/angular-rsbuild/host/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "angular_rsbuild_host",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild dev --open",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@angular/common": "20.3.19",
+    "@angular/compiler": "20.3.19",
+    "@angular/core": "20.3.19",
+    "@angular/platform-browser": "20.3.19",
+    "@angular/router": "20.3.19",
+    "@angular/ssr": "20.3.19",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "^0.15.1"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "20.3.19",
+    "@module-federation/rsbuild-plugin": "^2.4.0",
+    "@nx/angular-rsbuild": "^21.2.0",
+    "@rsbuild/core": "^1.7.5",
+    "typescript": "5.8.3",
+    "zephyr-rsbuild-plugin": "^1.0.3"
+  },
+  "zephyr:dependencies": {
+    "angular_rsbuild_remote": "workspace:*"
+  }
+}

module-federation/angular-rsbuild/host/rsbuild.config.ts

@@ -0,0 +1,57 @@
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+import { createConfig } from '@nx/angular-rsbuild';
+import { withZephyr } from 'zephyr-rsbuild-plugin';
+
+const shared = {
+  '@angular/common': { singleton: true, strictVersion: true },
+  '@angular/core': { singleton: true, strictVersion: true },
+  '@angular/platform-browser': { singleton: true, strictVersion: true },
+  rxjs: { singleton: true },
+};
+
+export default async () => createConfig({
+  options: {
+    assets: [],
+    browser: './src/main.ts',
+    devServer: {
+      port: 4200,
+    },
+    index: './src/index.html',
+    outputHashing: 'none',
+    outputPath: './dist',
+    styles: ['./src/styles.css'],
+  },
+  rsbuildConfigOverrides: {
+    output: {
+      assetPrefix: 'auto',
+    },
+  },
+}).then((config) => {
+  const browser = config.environments?.browser;
+
+  return {
+    ...config,
+    environments: undefined,
+    html: browser?.html,
+    output: {
+      ...browser?.output,
+      assetPrefix: 'auto',
+    },
+    plugins: [
+      ...(config.plugins ?? []),
+      ...(browser?.plugins ?? []),
+      pluginModuleFederation({
+        name: 'angular_rsbuild_host',
+        remotes: {
+          angular_rsbuild_remote: 'angular_rsbuild_remote@http://localhost:4201/mf-manifest.json',
+        },
+        shared,
+      }),
+      withZephyr(),
+    ],
+    source: {
+      ...config.source,
+      ...browser?.source,
+    },
+  };
+});