以下是一个完整的 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 路由的懒加载远程模块。
