NX Package-based Monorepo与Angular不兼容？模块联邦路径无法访问

• 检查模块联邦配置的路径映射
  Package-based模式里，每个package的模块联邦配置文件中，remotes的路径必须精准指向远程应用的入口地址。比如主应用的配置里，checkout和product要对应各自远程应用的开发服务器端口（比如checkout用4201，product用4202），别把端口写错或者路径拼错。

• 确认路由配置的正确性
  主应用路由里用loadRemoteModule加载远程模块时，要和远程应用暴露的模块路径完全匹配。举个例子：
  远程checkout应用的配置里要正确暴露模块：

exposes: {
  './Module': './src/app/checkout/checkout.module.ts',
},

主应用路由就得这么写：

{
  path: 'checkout',
  loadChildren: () =>
    loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:4201/remoteEntry.js',
      exposedModule: './Module',
    }).then((m) => m.CheckoutModule),
}

要是暴露路径和引用路径对不上，肯定加载不了。

• 验证跨版本Angular的兼容性配置
  因为你混用了Angular15和16，共享依赖的配置必须到位。不管主应用还是远程应用，模块联邦配置的shared字段要这么处理核心Angular包：

shared: {
  '@angular/core': { singleton: true, strictVersion: false, requiredVersion: 'auto' },
  '@angular/common': { singleton: true, strictVersion: false, requiredVersion: 'auto' },
  '@angular/router': { singleton: true, strictVersion: false, requiredVersion: 'auto' },
  // 其他需要共享的依赖也按这个格式配置
}

strictVersion: false能允许不同版本的依赖共存，避免版本冲突导致远程模块加载失败。

• 检查Package-based Monorepo的启动顺序
  这种模式下必须先启动所有远程应用的开发服务器，再启动主应用。要是主应用先跑起来，会因为拿不到远程入口文件导致路径访问失败。另外要确认每个package的启动脚本正确，比如用nx serve或者ng serve指定好端口。

• 对比Integrated模式的配置差异
  既然Integrated Monorepo下能正常运行，就把两种模式下的模块联邦配置、webpack配置做对比。Package-based模式里每个package的webpack配置可能缺少nx自动注入的插件或者参数，比如ModuleFederationPlugin的配置细节，确保核心参数和Integrated模式一致。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan