Angular Native Federation中在宿主应用同时展示多个微前端的实现方案咨询

你好！我来帮你搞定在Angular Native Federation动态宿主里同时展示多个微前端的需求。其实核心思路就是利用命名路由出口（Named Router Outlet），结合Native Federation的动态模块加载能力来实现，下面是具体的步骤：

第一步：修改宿主的app.component.html，添加命名路由出口 #

Angular默认的<router-outlet>是匿名的，只能对应一个路由目标。要同时展示多个微前端，我们需要给每个路由出口指定唯一的名称：

<!-- 给第一个微前端准备的命名路由出口 -->
<router-outlet name="mfe1"></router-outlet>

<!-- 给第二个微前端准备的命名路由出口 -->
<router-outlet name="mfe2"></router-outlet>

<!-- 保留默认匿名出口（可选，如果你还需要加载其他内容） -->
<router-outlet></router-outlet>

第二步：配置宿主的路由，指定每个微前端对应的出口 #

在宿主应用的app-routing.module.ts里，我们需要为每个微前端配置路由，并通过outlet属性指定它要渲染到哪个命名出口里。这里要用到Native Federation的loadRemoteModule来动态加载微前端模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/native-federation';

const routes: Routes = [
  // 配置第一个微前端的路由，指定渲染到mfe1出口
  {
    path: 'mfe1',
    outlet: 'mfe1',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js', // 替换成你的MFE1的remoteEntry地址
        exposedModule: './Module', // 对应MFE1暴露的模块名称
      }).then((m) => m.Mfe1Module), // 替换成MFE1的模块类名
  },

  // 配置第二个微前端的路由，指定渲染到mfe2出口
  {
    path: 'mfe2',
    outlet: 'mfe2',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4202/remoteEntry.js', // 替换成你的MFE2的remoteEntry地址
        exposedModule: './Module', // 对应MFE2暴露的模块名称
      }).then((m) => m.Mfe2Module), // 替换成MFE2的模块类名
  },

  // 可选：如果想页面加载时默认自动加载两个微前端，可以配置空路径的路由
  {
    path: '',
    outlet: 'mfe1',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './Module',
      }).then((m) => m.Mfe1Module),
  },
  {
    path: '',
    outlet: 'mfe2',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4202/remoteEntry.js',
        exposedModule: './Module',
      }).then((m) => m.Mfe2Module),
  },
];

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

第三步：触发路由导航（如果不是默认加载的话） #

如果你的需求不是页面加载就显示，而是需要通过按钮或其他事件触发加载，可以在宿主组件里使用Router服务来导航到指定的命名出口：

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

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

  loadBothMfes() {
    // 同时导航到两个命名出口的路由
    this.router.navigate([
      { outlets: { mfe1: ['mfe1'], mfe2: ['mfe2'] } }
    ]);
  }
}

一些需要注意的细节 #

• 确保你的每个微前端都已经正确启动，并且remoteEntry.js的地址是可访问的（比如MFE1启动在4201端口，MFE2在4202端口）。
• 检查微前端的webpack.config.js（由Native Federation生成）里，exposes配置的模块名称和你在宿主路由里写的exposedModule一致。
• 如果微前端内部有自己的子路由，确保它们的路由配置不会和宿主的路由冲突，建议给微前端的路由添加统一的前缀。

内容来源于stack exchange