使用Nx工作区创建的Module Federation应用路由异常求助

核心排查点及解决步骤 #

1. 核对壳应用路由配置 #

• 确保壳应用中为远程应用配置的路由前缀与挂载路径匹配，加载远程模块的路由需正确指向暴露的模块：

// 壳应用路由文件
const routes: Routes = [
  // 其他路由
  {
    path: 'customer-portal',
    loadChildren: () =>
      loadRemoteModule('customerPortal', './Module').then(m => m.RemoteEntryModule)
  }
];

2. 修正远程应用路由设置 #

• 远程应用的路由需使用相对路径，避免与壳应用路由前缀冲突，确保路由模块配置正确：

// 远程应用路由文件
const routes: Routes = [
  { path: 'auth/login', component: LoginComponent },
  // 其他远程路由
];

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

• 无需修改远程路由的路径，壳应用的customer-portal前缀会自动拼接，形成/customer-portal/auth/login路径。

3. 验证Module Federation配置 #

• 壳应用的远程应用配置需指向正确的远程入口文件：

// 壳应用 module-federation.config.ts
export const config: ModuleFederationConfig = {
  name: 'shell',
  remotes: [
    {
      name: 'customerPortal',
      url: 'http://localhost:4201/remoteEntry.js'
    }
  ]
};

• 远程应用需正确暴露根模块：

// 远程应用 module-federation.config.ts
export const config: ModuleFederationConfig = {
  name: 'customerPortal',
  exposes: {
    './Module': './src/app/app.module.ts'
  }
};

4. 统一路由策略 #

• 壳应用与远程应用必须使用相同的路由策略（均为PathLocationStrategy或HashLocationStrategy），否则会导致路由解析异常。

5. 清理缓存并重启服务 #

• 执行Nx缓存清理命令，再分别重启两个应用：

nx reset
nx serve shell
nx serve customer-portal

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