如何在旧版本Angular项目中使用Webpack 5的Module Federation功能

方案1：替换Angular 8默认构建器，兼容Webpack 5 #

该方案可直接在Angular 8项目中接入Webpack 5的Module Federation能力，无需升级Angular核心版本：

• 先卸载原有默认构建依赖：npm uninstall @angular-devkit/build-angular @angular/cli
• 安装兼容套件，12.x版本的自定义构建器同时适配Angular 8的项目结构与Webpack 5核心API，不会触发旧devkit的废弃方法报错：npm install @angular-builders/custom-webpack@12 @angular-builders/dev-server@12 @angular/cli@12 --save-dev
• 修改angular.json配置，替换原有build、serve节点的builder配置：

// angular.json 对应项目的architect配置片段
"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.mf.js" // 模块联邦配置文件路径
    },
    // 保留原有Angular构建的其余配置项即可
  }
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "你的项目名:build"
  }
}

• 在webpack.mf.js中编写正常的Module Federation配置，自定义构建器会自动将该配置与Angular内部构建规则合并，无需修改原有业务代码。

方案2：子应用预编译导出，零改动原有构建流程 #

该方案风险最低，完全不需要调整Angular 8项目的依赖与构建逻辑：

• Angular 8项目保留原有的Webpack 4构建流程，仅在入口文件中将需要对外暴露的组件、路由等挂载到全局对象，例如：window.mfAngular8App = { AppComponent, routes, bootstrap }
• 壳应用不用将Angular 8应用纳入Module Federation的远程模块列表，通过动态创建script标签加载该应用的构建产物，从window对象上读取导出内容后，和其他模块联邦加载的应用走统一的挂载逻辑即可。

注意事项 #

• 不同版本Angular应用需要做zone.js隔离，子应用加载前先判断window.Zone是否存在，已存在则不重复加载zone.js，避免全局上下文冲突。
• 若采用方案1，构建完成后需要重点验证Angular 8的依赖注入、变更检测、懒加载模块是否工作正常。

内容的提问来源于stack exchange，提问作者vp310