NX Monorepo中Angular库热重载失效，如何实现微前端组件联动更新？

安全阿岳

2026-7-10

NX Angular库修改后微前端组件同步更新解决方案

确认库的构建配置与依赖关联
检查库的project.json中build目标，确保开启watch且输出路径正确：
```
"build": {
  "executor": "@angular-devkit/build-angular:ng-packagr",
  "options": {
    "project": "libs/your-lib/ng-package.json",
    "watch": true
  }
}
```
同时确认微前端应用的package.json中，该库依赖为本地工作区引用（而非npm包版本），NX通常会自动处理，但需避免手动指定固定版本。

配置微前端的热更新与依赖监听
若使用Module Federation，在微前端的webpack配置或project.json的serve目标中，添加监听与热更新配置：

"serve": {
  "executor": "@nrwl/angular:module-federation-dev-server",
  "options": {
    "buildTarget": "your-mfe:build",
    "hmr": true,
    "liveReload": true,
    "watchAssets": true
  }
}

并在webpack配置中确保共享依赖的热更新支持：

new ModuleFederationPlugin({
  shared: {
    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
    "your-lib": { singleton: true, strictVersion: true, requiredVersion: 'auto', eager: true }
  }
})

同时启动库的监听构建与微前端服务
单独启动库的watch构建命令：
```
nx run your-lib:build --watch
```
再启动微前端的服务：
```
nx run your-mfe:serve
```
确保两个进程同时运行，库文件修改后会自动重构，微前端会检测到依赖变化并更新。
清理缓存
清理NX本地缓存：
```
nx reset
```
同时开启浏览器开发者工具的「禁用缓存」选项，避免客户端缓存旧文件。
规范导入导出方式
确保库通过public-api.ts导出所有需要的组件/服务，微前端应用从库的工作区入口导入：
```
import { YourComponent } from '@your-workspace/your-lib';
```
避免直接引用库的源码文件路径。