同一根页面渲染2个Angular微前端时路由冲突问题求助

核心实现逻辑 #

通过Angular官方提供的@angular/elements能力将两个子应用打包为独立自定义元素，完全脱离single-spa的路由管控，实现子应用路由和根应用路由、子应用之间路由的三重隔离。

具体落地步骤 #

1. 子应用改造（搜索/详情应用通用改造逻辑） #

• 安装@angular/elements依赖，关闭子应用默认自动引导逻辑，在模块的ngDoBootstrap钩子中注册自定义元素：

import { createCustomElement } from '@angular/elements';
import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    // 两个应用分别注册不同的自定义元素名，必须包含短横线符合WebComponents规范
    const customEl = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('person-search', customEl); // 搜索应用注册名
    // customElements.define('person-detail', customEl); // 详情应用注册名
  }
}

• 路由隔离配置，优先选Hash路由模式从根源避免路径冲突：

// 子应用的app-routing.module.ts配置
import { NgModule } from '@angular/core';
import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';

const routes: Routes = [
  // 原有子应用路由配置，可额外添加统一前缀避免hash冲突，比如搜索应用前缀加/search/
  { path: '', redirectTo: '/search/list', pathMatch: 'full' },
  { path: 'search/list', component: SearchListComponent },
  { path: 'search/detail', component: SearchDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    // 不需要子应用路由同步到地址栏时可开启，路由状态仅保存在子应用内部
    // initialNavigation: 'disabled'
  })],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppRoutingModule { }

• 打包配置调整：将zone.js设为外部依赖，由根应用统一引入，避免多实例冲突。

2. 根应用集成 #

• 直接引入两个子应用打包后的静态资源（js/css），不需要接入single-spa
• 搜索应用直接挂载到根应用对应DOM节点，详情应用挂载到Bootstrap Modal的内容容器内
• 状态通信直接通过自定义元素的属性、自定义事件实现，无需依赖全局Redux：

// 根应用监听搜索应用的选中事件
const searchEl = document.querySelector('person-search');
searchEl.addEventListener('personSelected', (e) => {
  const selectedPersonId = e.detail;
  const detailEl = document.querySelector('person-detail');
  // 传递人员ID到详情应用
  detailEl.setAttribute('person-id', selectedPersonId);
  // 唤起详情Modal
  const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
  detailModal.show();
});

踩坑注意事项 #

• 子应用样式可开启ViewEncapsulation.ShadowDom模式，完全隔离父子应用、子应用之间的样式污染
• 如果业务不需要子应用路由同步到浏览器地址栏，可关闭子应用路由的地址栏同步能力，彻底避免路由互相干扰
• 自定义元素的属性命名需要使用短横线格式，子应用内对应接收的Input属性用驼峰格式即可自动映射

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