如何用Webpack 5配置连接Angular 7与Angular 16应用

Angular 7的特殊处理 #

Angular 7默认依赖Webpack 4，要对接Webpack 5的模块联邦，必须做以下调整：

• Webpack版本适配：不能直接用Angular CLI默认构建，得通过@angular-builders/custom-webpack集成Webpack 5配置，或者完全自定义Webpack脚本。注意要安装与Angular 7兼容的Webpack 5版本（比如webpack@5.40.0左右，避免太高版本的兼容性问题）。
• 模块联邦插件配置：手动在Webpack配置中添加ModuleFederationPlugin，不能直接用最新版的@angular-architects/module-federation（该插件对Angular 7支持有限）。配置时要明确暴露Angular 7的模块，比如导出根模块或路由模块。
• 依赖隔离：Angular 7与16的核心依赖（@angular/core、@angular/common等）完全不兼容，必须在模块联邦的shared配置中设置这些依赖为singleton: false，让两个应用各自加载自己的依赖版本，避免全局冲突。
• 构建输出调整：修改Angular 7的构建配置，确保输出为ES模块或UMD格式，方便Webpack 5识别。可以在angular.json中调整outputPath，并通过自定义Webpack配置指定输出格式。

路由能否正常工作？ #

可以实现跨版本路由协同，但需要针对性配置：

• 路由隔离与前缀：给Angular 7的路由统一加前缀（比如/angular7），避免与Angular 16的路由路径冲突。宿主应用（建议用Angular 16）在路由配置中通过懒加载引入远程模块，示例：

  {
    path: 'angular7',
    loadChildren: () => import('angular7-app/Angular7Routes').then(m => m.Angular7RoutingModule)
  }
  

• 路由初始化：Angular 7的路由模块需要单独暴露，且远程应用的bootstrap逻辑要确保路由能正常初始化。如果远程应用是独立启动的，要保留自身的路由入口；作为微前端加载时，依赖宿主的路由上下文。
• 避免共享路由逻辑：Angular 7与16的路由API（比如守卫、Resolver）存在差异，不能共享这些逻辑，必须各自实现。

实际配置经验 #

• 别照搬AngularJS示例：Angular与AngularJS的模块机制完全不同，建议参考Angular跨版本模块联邦的配置思路，而非AngularJS示例。
• 分步验证：先单独让Angular 7通过Webpack 5构建运行，确保模块能正常暴露；再在Angular 16宿主中配置远程引用，测试加载是否成功，最后再调试路由和通信。
• 自定义Webpack配置示例（Angular 7侧）：

  const { ModuleFederationPlugin } = require('webpack').container;
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/main.ts',
    output: {
      publicPath: 'http://localhost:4201/' // Angular 7应用的运行地址
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'angular7App',
        filename: 'remoteEntry.js',
        exposes: {
          './Angular7Routes': './src/app/app-routing.module.ts',
          './Angular7Module': './src/app/app.module.ts'
        },
        shared: {
          '@angular/core': { singleton: false, strictVersion: false },
          '@angular/common': { singleton: false, strictVersion: false },
          '@angular/router': { singleton: false, strictVersion: false }
        }
      }),
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    // 其他loader配置（处理TypeScript、Angular模板等）
  };
  

• 宿主Angular 16侧配置：用官方@angular-architects/module-federation插件生成配置，在webpack.config.ts中添加远程应用引用：

  new ModuleFederationPlugin({
    remotes: {
      angular7App: 'angular7App@http://localhost:4201/remoteEntry.js'
    },
    shared: {
      // 同Angular 7侧，隔离核心依赖
    }
  })
  

跨版本Angular连接的其他建议 #

• 高版本做宿主：Angular 16对Webpack 5和模块联邦的支持更完善，作为宿主能减少兼容问题。
• 通信方式选择：避免直接调用对方的Angular服务，建议用全局自定义事件、PostMessage或状态管理库（如NgRx，但需各自独立实例）实现跨应用通信。
• 样式隔离：给两个应用的样式添加独特前缀，或使用CSS Modules、Shadow DOM，防止样式污染。
• 逐步迁移：如果长期维护，建议逐步将Angular 7的业务模块迁移到Angular 16，减少版本差异带来的维护成本。
• 测试兼容性：重点测试依赖加载、路由跳转、组件渲染三个核心场景，遇到冲突优先检查shared配置和依赖版本。

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