Angular模块联邦中远程应用router.navigate跳转失效问题

问题场景 #

远程应用（mfe-app）单独运行时，router.navigate能正常切换组件；但嵌入宿主应用（host-app）后，仅URL发生变化，组件无法切换。

核心原因&修复步骤 #

1. 改用相对路由跳转 #

远程应用嵌入宿主后，路由会挂载在宿主的某个父路径下（比如/mfe-app），使用绝对路由会匹配不到远程应用的路由配置。

修改跳转代码：
注入ActivatedRoute，基于当前路由上下文使用相对路径跳转：

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-learn',
  templateUrl: './learn.component.html'
})
export class LearnComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  goToTodo() {
    // 相对路径跳转，适配宿主挂载的父路由
    this.router.navigate(['./todo'], { relativeTo: this.route });
  }
}

2. 匹配宿主路由的子路由结构 #

确保远程应用的路由配置是子路由结构，适配宿主的挂载路径：

• 宿主路由配置（host-app的路由模块）：

  import { Routes } from '@angular/router';
  import { loadRemoteModule } from '@angular-architects/module-federation';
  
  const routes: Routes = [
    // 其他宿主路由
    {
      path: 'mfe-app',
      loadChildren: () => loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './AppModule'
      }).then(m => m.AppModule)
    }
  ];
  

• 远程路由配置（mfe-app的路由模块）：

  const routes: Routes = [
    { path: '', component: LearnComponent }, // 对应宿主/mfe-app路径
    { path: 'todo', component: TodoComponent } // 对应宿主/mfe-app/todo路径
  ];
  

3. 共享@angular/router依赖 #

宿主和远程应用必须使用同一个Router实例，否则路由变化无法同步。在两者的module-federation.config.ts中添加共享配置：

// host-app和mfe-app的module-federation.config.ts
module.exports = {
  // 其他配置
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
    "@angular/router": { singleton: true, strictVersion: true },
    // 根据需要添加其他共享依赖
  }
};

4. 避免重复初始化Router.forRoot #

远程应用单独运行时用RouterModule.forRoot()，嵌入宿主时应改用RouterModule.forChild()，避免重复初始化路由系统。可通过全局标识判断运行环境：

// mfe-app的路由模块
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [/* 远程路由配置 */];

export function getRouterModuleConfig() {
  // 判断是否为嵌入宿主环境（可根据模块联邦加载逻辑调整标识）
  const isRemote = window['__IS_REMOTE_APP__'] || false;
  return isRemote 
    ? RouterModule.forChild(routes) 
    : RouterModule.forRoot(routes);
}

@NgModule({
  imports: [getRouterModuleConfig()],
  exports: [RouterModule]
})
export class AppRoutingModule {}

注：可在远程应用main.ts中设置全局标识，比如加载完成后执行window['__IS_REMOTE_APP__'] = true;。

验证步骤 #

1. 重启宿主应用：ng serve host-app
2. 重启远程应用：ng serve mfe-app
3. 访问宿主应用中的远程模块入口，点击跳转按钮，检查组件是否正常切换。

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