Angular 17原生联邦微前端出现404资源加载错误求助

错误根源 #

从报错信息可明确问题核心：

• 宿主应用使用@angular/core版本为17.3.12，但微前端服务（localhost:4201）尝试加载版本为17.0.5的_angular_core-17_0_5-dev.js，版本不匹配导致该文件不存在，触发404。
• ngx-highlightjs-10_0_0-dev.js、_angular_router-17_0_5-dev.js的404问题同理，本质都是依赖版本不统一或Native Federation共享配置错误。

解决步骤 #

• 统一所有项目的依赖版本
  确保宿主应用和所有微前端项目的@angular/core、@angular/router、ngx-highlightjs等共享依赖版本完全一致。修改各项目的package.json，将对应依赖的版本号统一为相同值（如17.3.12），执行npm install重新安装依赖。

• 修正Native Federation共享配置
  在微前端的module-federation.config.js（或webpack.config.js）中，调整共享依赖配置，示例如下：

  shared: {
    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: "auto" },
    "@angular/router": { singleton: true, strictVersion: true, requiredVersion: "auto" },
    "ngx-highlightjs": { singleton: true, strictVersion: true, requiredVersion: "auto" }
  }
  

  requiredVersion: "auto"会自动读取当前项目的依赖版本，避免手动指定版本带来的不匹配；singleton: true确保整个微前端体系中仅加载一份依赖实例。

• 清理缓存并重启服务

  1. 删除所有项目的node_modules目录和package-lock.json（或yarn.lock）文件；
  2. 重新执行npm install安装依赖；
  3. 彻底重启宿主和微前端的开发服务器，确保新配置与依赖生效。

• 验证模块暴露路径
  检查微前端的Native Federation配置，确认已正确暴露需被宿主加载的模块，避免因路径配置错误导致资源无法找到。

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