使用Angular Module Federation插件时应用陷入无限重载

以下是针对该问题的排查和解决步骤：

1. 修正Webpack的publicPath配置 #

在微前端的自定义Webpack配置文件中，确保output.publicPath设置正确。如果微前端运行在子路径下，可将其设置为'auto'（Webpack 5+支持），或者明确指定对应路径：

module.exports = {
  output: {
    publicPath: 'auto',
    // 也可根据实际访问路径设置：publicPath: 'http://localhost:3000/dashboard/'
  },
  // 其他Module Federation配置项...
};

仅在angular.json中设置publicHost不足以覆盖Webpack的资源加载路径，需要同时配置该项。

2. 检查路由配置冲突 #

• 壳应用的路由配置中，加载微前端的条目要避免模糊匹配（如**）提前拦截子路由，确保微前端路由能被正确匹配：

// 壳应用路由示例
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('dashboard/Module').then(m => m.DashboardModule)
  },
  // 将全局兜底路由放在微前端路由之后
  { path: '**', redirectTo: '' }
];

• 微前端的路由要设置为子路由模式，路径相对于壳应用的父路径：

// 微前端路由示例
const routes: Routes = [
  {
    path: '', // 空路径对应壳应用的/dashboard路径
    component: DashboardComponent
  },
  // 微前端内部子路由
  { path: 'detail', component: DashboardDetailComponent }
];

3. 确认Base Href设置 #

• 构建微前端时，通过命令行指定--base-href参数，匹配其在壳应用中的访问路径：

ng build --base-href /dashboard/

• 若需动态适配部署路径，可在微前端的index.html中添加动态设置base href的脚本（要在Angular启动前执行）：

<script>
  document.write(`<base href="${window.location.pathname}">`);
</script>

4. 排查路由守卫与重定向逻辑 #

检查微前端中是否存在全局路由守卫（如AuthGuard）或默认路由重定向逻辑，是否会因为壳应用的状态（如未登录、缺少全局服务）导致循环重定向。例如：
若微前端守卫在未认证时重定向到/login，但壳应用未提供该路由，Angular会回退到默认路由，进而触发微前端重新加载形成循环。此时需调整守卫的重定向目标，或由壳应用统一处理认证逻辑。

5. 检查资源加载错误 #

打开浏览器开发者工具的控制台和网络面板，查看是否有微前端的静态资源（JS、CSS、assets）加载失败（404状态）。资源加载失败会导致Angular应用初始化失败，进而触发路由重新导航，形成无限刷新循环。

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