Angular 16模块联邦加载动态模块失败问题排查求助

结合你的配置和常见问题，按以下步骤逐一排查：

1. 验证远程模块入口可访问 #

直接在浏览器地址栏访问 http://localhost:3000/remoteEntry.js：

• 如果返回404：确认Demo项目是否在3000端口启动，检查启动日志的端口号；确认Demo项目构建产物是否生成了remoteEntry.js文件（默认在dist目录下）。
• 如果无法加载：配置Demo项目的devServer允许跨域，在webpack.config中添加：

  module.exports = withModuleFederationPlugin({
    // 原有配置...
  });
  
  // 新增devServer跨域配置
  module.exports.devServer = {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
  };
  

2. 修正远程模块暴露方式 #

你当前暴露的是Demo项目的根AppModule，但根模块包含bootstrap配置，直接加载会与Shell的应用启动逻辑冲突，正确做法是暴露专用的路由模块：

• 在Demo项目中创建独立的功能模块（如DashboardModule），包含路由配置和业务组件，确保该模块没有bootstrap配置。
• 修改Demo的webpack.config暴露路径：

  exposes: {
    './DashboardModule': './src/app/dashboard/dashboard.module.ts', // 替换为你的功能模块路径
  },
  

3. 调整Shell路由加载逻辑 #

对应修改Shell的路由配置，加载Demo暴露的功能模块而非根模块：

{
  path: 'dashboard',
  loadChildren: () =>
    loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:3000/remoteEntry.js',
      exposedModule: './DashboardModule' // 与Demo暴露的模块名一致
    })
    .then(m => m.DashboardModule) // 对应模块类名
},

4. 缓解共享依赖版本冲突 #

shareAll的strictVersion: true会严格校验依赖版本，若两个项目的Angular核心包或其他依赖存在版本差异，会导致加载失败：
修改两个项目的webpack.config中shared配置：

shared: {
  ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }),
},

5. 验证依赖版本一致性 #

确保Shell和Demo项目的@angular-architects/module-federation版本完全一致，版本不匹配会引发兼容性问题，可通过以下命令统一版本：

# 在两个项目中分别执行
npm install @angular-architects/module-federation@<统一版本号>

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