Angular模块联邦加载远程模块报错：Chunk加载失败请求端口错误

• 触发该问题的核心原因是远程应用（项目2）的webpack配置未指定正确的publicPath。webpack加载动态chunk时默认会使用当前页面的域名作为路径前缀，你没有为远程应用声明独立的publicPath，因此当宿主页面运行在4200端口时，后续从远程Entry触发的chunk请求就自动拼接了4200的origin，而非远程应用的3000端口地址。
• 若你使用的是@angular-architects/module-federation这类Angular生态的模块联邦封装工具，还要额外确认远程项目的配置中没有误将publicPath设为相对路径、空值或者宿主的地址。

你只需要调整项目2（远程应用）的模块联邦配置即可：

本地开发场景 #

直接硬写远程应用的服务地址，注意末尾的斜杠不可省略：

module.exports = withModuleFederationPlugin({
  name: "mfe1",
  filename: "remoteEntry.js",
  publicPath: "http://localhost:3000/", // 新增该行配置
  exposes: {
    './Module': './src/app/contact/contact.module.ts',
  }
})

生产部署场景 #

推荐使用auto值，webpack会自动根据remoteEntry.js的加载地址推断动态chunk的前缀，无需硬写部署域名，适配多环境部署：

publicPath: "auto"

修改配置后重启远程应用的webpack devServer，重新验证即可解决跨端口加载chunk的问题。

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