Angular Native Federation中baseHref的正确配置及跨环境（生产/本地）路径兼容问题排查

我完全理解你现在的困境——在Angular 17 + Native Federation的微前端架构中，跨环境（生产带/app-context路径、本地不带）的路径兼容确实容易踩坑，尤其是Host应用因为需要加载manifest文件，比MFE应用多了一层路径配置的复杂度。下面针对你提出的两种需求，给出具体的解决方案：

方案一：无需硬编码Context路径，自动适配生产/本地环境（推荐） #

你的核心问题根源在于main.ts中硬编码了绝对路径/app-context/assets/federation.manifest.json，导致本地环境下浏览器会错误地请求localhost:4200/app-context/assets/...（而本地根本没有这个路径）。其实我们可以利用Angular的baseHref特性和Native Federation对相对路径的支持，彻底解决环境差异问题：

1. 修改main.ts为相对路径 #

将manifest的路径改为相对路径，让Angular根据当前环境的baseHref自动解析最终路径：

import { initFederation } from '@angular-architects/native-federation';

// 使用相对路径，依赖Angular的baseHref自动适配环境
initFederation('assets/federation.manifest.json')
  .catch(err => console.error(err))
  .then(_ => import('./bootstrap'))
  .catch(err => console.error(err));

2. 确保angular.json的baseHref配置正确 #

• 生产环境：保持现有配置baseHref: "/app-context/"，此时相对路径assets/...会被自动解析为/app-context/assets/...，完全匹配生产环境的部署路径。
• 本地环境（dsv/local）：不要设置baseHref（或显式设为"/"），此时相对路径assets/...会解析为/assets/...，对应本地localhost:4200/assets/...的文件位置。

为什么这能生效？ #

Angular的baseHref会作为所有相对路径的解析基准，生产环境的/app-context/会让浏览器自动在请求前拼接这个前缀，而本地环境的/则直接请求根目录下的资源，完美适配两种场景，无需任何环境判断代码。

方案二：本地环境也配置baseHref，统一路径规则 #

如果你因为测试需求，必须让本地环境也和生产环境一样使用/app-context/作为路径前缀，需要同步配置Native Federation的publicPath，避免remoteEntry.json的404问题：

1. 修正angular.json的本地环境配置 #

在projects.app-context.architect.esbuild.configurations.dsv中，同时设置baseHref和publicPath：

"dsv": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.dsv.ts"
    }
  ],
  "baseHref": "/app-context/",
  "publicPath": "/app-context/"
}

• baseHref：让Angular的页面资源都基于/app-context/加载
• publicPath：告诉Native Federation将remoteEntry.json的发布路径设为/app-context/remoteEntry.json，确保Host应用能正确找到它

2. 启动本地服务时指定配置 #

确保启动本地服务时使用dsv配置：

ng serve --configuration dsv

此时你需要通过localhost:4200/app-context/访问应用，所有资源（包括manifest和remoteEntry）都会正确加载。

额外排查要点 #

1. 确认Assets配置：检查angular.json中assets数组包含src/assets，确保manifest文件会被正确复制到dist目录的assets文件夹下。
2. 浏览器Network面板调试：遇到路径问题时，打开浏览器控制台的Network面板，查看manifest和remoteEntry的请求路径，快速定位是路径拼接错误还是文件未正确生成。
3. MFE应用的独立性：MFE应用无需加载manifest，所以它们的baseHref配置可以保持独立，无需和Host应用同步，这是正常的，不用强行统一。

内容来源于stack exchange