????????以下是一個完整的 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 路由的懶加載遠程模塊。
)
