Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。
🛠️ 项目结构
angular-mf/
├── shell-app/ # 主应用（Shell）
├── remote-app/ # 子应用（Remote）
├── angular.json # Angular CLI 配置
└── package.json # 项目依赖
1️⃣ 安装依赖
首先，确保你已安装 npx-build-plus：
ng add ngx-build-plus
然后，安装 @angular-architects/module-federation：
npm install @angular-architects/module-federation --save-dev
2️⃣ 配置 Remote 应用（子应用）
在remote-app/webpack.config.js 中，配置ModuleFederationPlugin：
const { ModuleFederationPlugin } = require('webpack').container;module.exports = {output: {uniqueName: 'remoteApp',publicPath: 'auto',},plugins: [new ModuleFederationPlugin({name: 'remoteApp',filename: 'remoteEntry.js',exposes: {'./RemoteModule': './src/app/remote/remote.module.ts',},shared: {'@angular/core': { singleton: true, strictVersion: true },'@angular/common': { singleton: true, strictVersion: true },'@angular/router': { singleton: true, strictVersion: true },},}),],
};
3️⃣ 配置 Shell 应用（主应用）
在 shell-app/webpack.config.js 中，配置ModuleFederationPlugin：
const { ModuleFederationPlugin } = require('webpack').container;module.exports = {output: {uniqueName: 'shellApp',},plugins: [new ModuleFederationPlugin({name: 'shellApp',remotes: {remoteApp: 'remoteApp@http://localhost:4201/remoteEntry.js',},shared: {'@angular/core': { singleton: true, strictVersion: true },'@angular/common': { singleton: true, strictVersion: true },'@angular/router': { singleton: true, strictVersion: true },},}),],
};
4️⃣ 配置 Angular.json File + Angular 路由
angular.json文件配置如下：angular.json 配置的关键部分是如何集成 npx-build-plus 以支持 Webpack Module Federation。
✅ angular.json 配置说明
🧭 关键修改目标
-
使用 npx-build-plus 替代默认@angular-devkit/build-angular:browser
-
添加extraWebpackConfig 指向自定义的 Webpack 配置文件
-
配置输出格式（如 umdModules(非必须)、outputPath）
📁 angular.json 配置片段
{"projects": {"shell-app": {"architect": {"build": {"builder": "ngx-build-plus:browser","options": {"outputPath": "dist/shell-app","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": ["src/favicon.ico", "src/assets"],"styles": ["src/styles.scss"],"scripts": [],"extraWebpackConfig": "webpack.config.js","umdModuleIds": {"@angular/core": "ng.core","@angular/common": "ng.common","@angular/router": "ng.router"}},"configurations": {"production": {"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}]}}},"serve": {"builder": "ngx-build-plus:dev-server","options": {"browserTarget": "shell-app:build"},"configurations": {"production": {"browserTarget": "shell-app:build:production"}}}}}}
}
📦 额外建议
-
确保webpack.config.js 文件存在于根目录或指定位置。
-
如果你有多个环境配置（如 staging/test），也可以扩展configurations 。
-
如果你使用webpack.prod.config.js，可以在生产配置中加上extraWebpackConfig 覆盖。
在shell-app/src/app/app-routes.ts 中，配置动态加载 Remote 模块：
import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';export const routes: Routes = [{path: 'remote',loadChildren: () =>loadRemoteModule({remoteName: 'remoteApp',exposedModule: './RemoteModule',}).then((m) => m.RemoteModule),},
];
5️⃣ 启动应用
分别启动 Remote 和 Shell 应用：
# 启动 Remote 应用
cd remote-app
ng serve --port 4201# 启动 Shell 应用
cd shell-app
ng serve --port 4200
访问 http://localhost:4200/remote 即可加载 Remote 模块。
✅ 总结
-
使用 Webpack 5 的 ModuleFederationPlugin 实现了主应用与子应用的动态模块共享。
-
通过npx-build-plus扩展了 Angular CLI 的构建功能，支持自定义 Webpack 配置。
-
采用@angular-architects/module-federation提供的 loadRemoteModule实现了 Angular 路由的懒加载远程模块。