Single-spa Angular子应用路由跳转异常问题求助

1. 同步Single-Spa根路由与Angular子应用路由 #

Angular子应用作为parcel运行时，不会自动监听根应用的路由变化，需要手动订阅路由事件触发更新：

• 在子应用的AppComponent中添加路由监听逻辑：

  import { Router } from '@angular/router';
  import { singleSpaPropsSubject } from 'src/single-spa/single-spa-props';
  
  constructor(private router: Router) {}
  
  ngOnInit() {
    singleSpaPropsSubject.subscribe((props) => {
      if (props?.location?.pathname) {
        // 提取子应用专属路由部分，去掉/app1前缀
        const subRoutePath = props.location.pathname.replace('/app1', '') || '/';
        this.router.navigateByUrl(subRoutePath);
      }
    });
  }
  

• 同时确认根应用的子应用激活规则正确：

  registerApplication({
    name: '@your-org/app1',
    app: () => System.import('@your-org/app1'),
    activeWhen: (location) => location.pathname.startsWith('/app1'),
  });
  

2. 动态配置APP_BASE_HREF #

不要在app-routing.module.ts硬编码APP_BASE_HREF，改为通过single-spa传递的props动态设置：

• 修改子应用的main.single-spa.ts：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { singleSpaAngular } from 'single-spa-angular';
  import { Router } from '@angular/router';
  import { APP_BASE_HREF } from '@angular/common';
  
  const lifecycles = singleSpaAngular({
    bootstrapFunction: (props) => {
      return platformBrowserDynamic([
        { provide: APP_BASE_HREF, useValue: props.baseHref || '/app1' }
      ]).bootstrapModule(AppModule);
    },
    template: '<app-root></app-root>',
    Router,
  });
  
  export const bootstrap = lifecycles.bootstrap;
  export const mount = lifecycles.mount;
  export const unmount = lifecycles.unmount;
  

• 移除app-routing.module.ts中硬编码的providers配置。

3. 统一路由模式 #

确保根应用与子应用使用相同的路由模式（HTML5模式）：

• 在子应用的app-routing.module.ts中禁用Hash模式：

  @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: false })],
    exports: [RouterModule],
  })
  export class AppRoutingModule { }
  

4. 简化子应用路由配置 #

子应用路由使用相对路径，无需添加/app1前缀：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'search', component: SearchComponent },
  { path: 'details', component: DetailsComponent },
];

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