Angular Module Federation：从Web组件化微前端触发Shell路由

当然可以实现，下面是几种适合Angular Module Federation场景的实用方案：

方案一：通过自定义事件（Custom Event）跨边界通信 #

这是最解耦的方式，利用Web标准的自定义事件机制，微前端触发事件，Shell监听并处理路由跳转：

1. 微前端触发事件：在跳转按钮的点击逻辑里，向全局window对象派发自定义事件，携带目标路由路径：

// 微前端组件代码
goToShellHome() {
  window.dispatchEvent(new CustomEvent('navigate-to-shell-route', {
    detail: { path: '/' } // 替换为Shell的目标路由，比如'/dashboard'
  }));
}

2. Shell监听并处理路由：在Shell的根组件（如AppComponent）里监听该事件，收到后调用自身的Router完成跳转：

// Shell的AppComponent代码
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    window.addEventListener('navigate-to-shell-route', (event: CustomEvent) => {
      const targetPath = event.detail.path;
      this.router.navigate([targetPath]);
    });
  }
}

优势：完全解耦，微前端无需依赖Shell的任何内部服务，只需提前约定事件名称和传参格式即可。

方案二：通过Module Federation共享路由桥接服务 #

如果希望沿用Angular的服务注入模式，可以在Shell中定义一个专门的路由桥接服务，通过Module Federation暴露给微前端使用：

1. Shell定义并暴露路由服务：创建一个封装Shell路由逻辑的服务，并在Module Federation配置中暴露：

// Shell的shell-router.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class ShellRouterService {
  constructor(private router: Router) {}

  navigateTo(path: string[]) {
    this.router.navigate(path);
  }
}

在Shell的Module Federation配置中添加暴露规则：

// Shell的module-federation.config.js
module.exports = {
  name: 'shell',
  exposes: {
    './ShellRouterService': './src/app/shell-router.service.ts',
  },
  // 其他现有配置...
};

2. 微前端导入并调用服务：远程导入Shell的路由服务，在组件中注入并调用跳转方法：

// 微前端组件代码
import { ShellRouterService } from 'shell/ShellRouterService';
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'mf-home-button',
  template: '<button (click)="goHome()">返回Shell首页</button>'
})
export class HomeButtonComponent {
  constructor(@Inject(ShellRouterService) private shellRouter: ShellRouterService) {}

  goHome() {
    this.shellRouter.navigateTo(['/']);
  }
}

优势：符合Angular的依赖注入设计，代码风格统一，适合大型Angular微前端体系。

方案三：全局挂载路由方法（应急方案） #

如果需要快速验证或项目规模较小，可以在Shell中将路由方法挂载到全局window对象，微前端直接调用：

1. Shell挂载全局方法：在根组件中把Router的navigate方法绑定到window：

// Shell的AppComponent代码
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    (window as any).shellNavigate = (path: string[]) => {
      this.router.navigate(path);
    };
  }
}

2. 微前端调用全局方法：直接调用window上的方法完成跳转：

// 微前端组件代码
goToShellHome() {
  (window as any).shellNavigate(['/']);
}

注意：这种方式耦合度高，全局变量容易引发命名冲突，不推荐在大型项目中使用。

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