Single Spa Angular应用异常：页面空白问题排查及独立运行需求

核心原因 #

1. 模板转义错误：main.single-spa.ts的singleSpaAngular配置中，template字段用了HTML转义字符<和>，浏览器无法识别为Angular组件标签，导致AppComponent无法渲染。
2. 路由配置缺失默认场景：当前仅配置了通配符**指向EmptyRouteComponent，没有设置默认路径指向AppComponent，即使模板修复，路由逻辑也可能导致目标组件无法显示。
3. 组件选择器与项目前缀不一致：创建项目时指定--prefix my-angular-app，但AppComponent选择器是poc-angular-root，虽不直接导致空白，但可能引发后续组件识别问题。

分步解决 #

1. 修复模板转义问题 #

修改main.single-spa.ts中的template配置，将转义字符替换为真实HTML标签：

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<poc-angular-root />', // 替换转义字符为正常标签
  Router,
  NavigationStart,
  NgZone,
});

2. 调整路由配置 #

在app-routing.module.ts中添加默认路由，确保单独运行时能渲染AppComponent：

const routes: Routes = [
  { path: '', component: AppComponent }, // 添加默认路由
  { path: '**', component: EmptyRouteComponent }
];

3. 统一组件选择器（可选） #

若要保持项目前缀一致性，修改AppComponent选择器并同步更新模板标签：

// AppComponent
@Component({
  selector: 'my-angular-app-root', // 改为项目前缀对应的选择器
  template:`Hello From AppComponent`
})

// main.single-spa.ts
template: '<my-angular-app-root />',

4. 移除不必要的APP_BASE_HREF配置 #

single-spa-angular会自动处理基础路径，无需手动设置APP_BASE_HREF，可从AppModule的providers中移除：

// AppModule
providers: [], // 移除APP_BASE_HREF提供者

验证运行 #

修改完成后重新执行npm run serve:single-spa:my-angular-app，页面应显示Hello From AppComponent内容。

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