基于Module Federation的Angular Shell应用嵌套组件及子路由加载问题

问题背景 #

Shell应用基于Angular 16，MFE微前端基于Angular 13（多仓库工作区），在Shell中引入ExampleModule后，模块内带router-outlet的Wrapper组件无法正常挂载子路由——MFE单独运行一切正常，但Shell中仅能显示左侧导航，子路由内容无法渲染，尝试过命名路由出口仍未解决。

分步解决方案 #

1. 隔离MFE路由前缀，避免与Shell路由冲突 #

在MFE的ExampleRoutingModule中，给所有子路由配置独立的上下文路径，确保路由不与Shell冲突：

// ExampleRoutingModule
const routes: Routes = [
  {
    path: '', // 保持MFE内部路由根路径，由Shell路由提供外部前缀
    component: ExampleWrapperComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component },
      { path: '', redirectTo: 'child1', pathMatch: 'full' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ExampleRoutingModule { }

2. Shell侧路由适配MFE加载逻辑 #

在Shell的路由配置中，使用loadRemoteModule加载MFE时，指定匹配的路由路径，并配置兼容跨版本的路由策略：

// Shell路由配置
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
  {
    path: 'example',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:3000/remoteEntry.js', // 替换为你的MFE入口地址
        exposedModule: './ExampleModule'
      }).then(m => m.ExampleModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: false, // 根据实际场景选择，避免路由模式冲突
    initialNavigation: 'enabledBlocking'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 修复跨版本路由共享配置（webpack.config.js） #

在MFE的webpack.config.js中，确保核心Angular库的共享配置允许版本兼容，避免Shell与MFE的路由模块版本冲突：

// MFE的webpack.config.js
module.exports = withModuleFederationPlugin({
  name: 'exampleMfe',
  exposes: {
    './ExampleModule': './src/app/example/example.module.ts',
  },
  shared: {
    '@angular/core': { singleton: true, strictVersion: false },
    '@angular/common': { singleton: true, strictVersion: false },
    '@angular/router': { singleton: true, strictVersion: false }, // 关键：共享路由模块，关闭严格版本检查
    '@angular/common/http': { singleton: true, strictVersion: false }
  },
});

4. 命名路由出口的正确配置（若需使用） #

如果必须使用命名出口，需确保MFE内部和Shell侧的配置完全对应：

• MFE的Wrapper组件模板：

<div class="sidebar">左侧导航</div>
<router-outlet name="exampleChild"></router-outlet>

• MFE路由配置：

children: [
  { 
    path: 'child1', 
    component: Child1Component,
    outlet: 'exampleChild' // 指定命名出口
  },
  { 
    path: 'child2', 
    component: Child2Component,
    outlet: 'exampleChild'
  }
]

• Shell侧跳转时指定出口：

<a [routerLink]="['/example', { outlets: { exampleChild: ['child1'] } }]">Child1</a>

5. 验证路由上下文与版本兼容性 #

1. 打开Angular DevTools，检查Shell的路由树是否包含MFE的子路由节点；
2. 确认MFE的remoteEntry.js中@angular/router的版本与Shell侧兼容；
3. 清除Shell和MFE的缓存，重新构建运行。

关键注意事项 #

• 跨版本MFE必须关闭核心库的严格版本检查，确保Shell与MFE共享同一实例的路由模块；
• MFE内部路由尽量使用相对路径，由Shell路由提供外部前缀，避免路由上下文混乱；
• 不要在Shell中定义与MFE内部重复的路由路径，保持路由唯一性。

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