Angular webpack module federation微前端壳应用加载无限刷新问题

核心排查方向按优先级排序 #

• 先打开浏览器开发者工具，优先看Console面板的报错/警告、Network面板的请求记录，大部分问题可以直接从日志里定位到根因。

1. 共享依赖未配置单例（最高发原因） #

微前端加载时重复初始化Angular核心运行时、重复触发路由变更检测，会直接导致渲染循环、页面无限刷新。

• 核对壳应用和所有微前端的Module Federation配置，所有Angular核心包、rxjs、zone.js必须配置单例模式，参考配置：

// webpack.config.js 中 Module Federation 的 shared 段
shared: {
  "@angular/core": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "@angular/common": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "@angular/router": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "@angular/platform-browser": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "@angular/platform-browser-dynamic": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "rxjs": { singleton: true, strictVersion: true, requiredVersion: "auto" },
  "zone.js": { singleton: true, strictVersion: true, requiredVersion: "auto" }
}

• 确保所有关联应用的Angular、rxjs、zone.js版本完全一致，版本不匹配会导致单例加载失败，自动 fallback 到微前端自带的依赖副本，触发重复初始化。
• 微前端入口需要区分运行场景：独立运行时自行启动platformBrowserDynamic().bootstrapModule(AppModule)，被壳应用加载时不要自行启动，由壳应用调用暴露的挂载方法完成初始化，避免重复启动Angular实例。

2. 路由base路径配置冲突 #

微前端硬编码的根路径和壳应用挂载的子路径不匹配时，Angular路由会反复解析路径触发重定向，形成刷新循环。

• 将所有微前端index.html中的硬编码base标签从<base href="/">改为<base href="./">，使用相对路径适配不同挂载场景。
• 微前端内部所有路由跳转、静态资源引用不要写绝对根路径，统一使用相对路径。
• 微前端的路由模块初始化时，配置initialNavigation: 'enabledBlocking'，避免和壳应用的路由初始化时机冲突：

// 微前端 app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabledBlocking'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. 静态资源/远程入口路径配置错误 #

如果微前端的publicPath配置错误，被壳应用加载时会从壳应用域名下请求资源，返回404后触发路由通配符重定向，反复加载形成循环。

• 微前端webpack配置的output.publicPath必须填写微前端实际部署的完整绝对路径，例如微前端部署在https://xxx.com/mfe1/下，就配置为publicPath: "https://xxx.com/mfe1/"，不要留空或者写/。
• 壳应用中配置的微前端remoteEntry.js地址要和微前端实际部署地址完全一致，如果Network面板看到反复请求remoteEntry.js或者微前端静态资源返回404，直接修正对应路径配置即可。

4. 路由守卫逻辑死循环 #

如果壳应用或者微前端配置了全局路由守卫，守卫中的权限/登录态判断逻辑没有兼容微前端挂载场景，会出现重定向目标为当前路由的情况，触发无限跳转。

• 在路由守卫的跳转逻辑中加日志断点，如果发现重复触发同一路由跳转，补充微前端场景的判断逻辑，避免无效重定向。

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