single-spa-angular微前端多路由场景浏览器刷新后失效问题求助

问题根因 #

该问题是single-spa微前端架构下HTML5路由模式的常见问题：原生Angular应用独立部署时，服务器默认会配置所有路由请求返回应用入口index.html；但接入single-spa后，Angular作为微应用运行，刷新时浏览器会直接请求当前子路由对应的服务器资源，若主应用/服务器未做兜底配置、微应用路由基础路径配置错误，就会出现无法加载应用、页面空白的问题。

修复步骤 #

• 修正微应用基础路由配置
  在微应用的app-routing.module.ts中注入正确的APP_BASE_HREF，值对应你微应用的挂载路由前缀，示例：

  import { APP_BASE_HREF } from '@angular/common';
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [{ provide: APP_BASE_HREF, useValue: '/app1/' }]
  })
  export class AppRoutingModule { }
  

  同时确保微应用所有路由的路径不需要重复加前缀，比如路由直接配'route1'而不是'/app1/route1'，前缀由APP_BASE_HREF自动拼接。
• 配置主应用路由兜底
  不管是开发环境还是生产环境，都要配置所有请求统一返回主应用的index.html，让前端路由接管匹配逻辑：
  • 开发环境webpack-dev-server：在配置中开启historyApiFallback: true
  • 生产环境Nginx：在server配置块中添加try_files $uri $uri/ /index.html;
• 校验微应用注册规则
  主应用中注册该Angular微应用时，activeWhen匹配规则必须和微应用的路由前缀完全一致，比如微应用所有路由都以/app1开头，注册时activeWhen就设为'/app1'，确保刷新时主应用能正确识别并加载对应的微应用。
• 修正微应用路由兜底规则
  微应用的路由通配符规则不要直接重定向到根路径/，要重定向到微应用的默认路由，示例：

  const routes: Routes = [
    { path: 'route1', component: Route1Component },
    { path: 'route2', component: Route2Component },
    { path: '**', redirectTo: '/app1/route1' }
  ]
  

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