如何通过Module Federation在Angular壳应用中加载React微前端远程模块？

我正在开发两个独立的微前端项目，均部署在同一个S3存储桶中但相互独立：

• Angular Portal：基于Angular构建的微前端编排壳应用
• React Portal：基于React构建的独立项目，已通过Webpack Module Federation实现微前端架构

我的目标是让Angular壳应用加载React项目中的远程模块，并在自身路由系统内展示，但Angular与React的组件模型完全不兼容。

我已在两个项目中配置了Webpack Module Federation：

React项目配置（webpack.config.js） #

new ModuleFederationPlugin({
  name: 'portal',
  filename: 'remoteEntry.js',
  exposes: {
    './Bootstrap': './src/main.js'  // 暴露登录组件
  },
  shared: {
    react: { singleton: true, requiredVersion: '^17.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
  }
})

Angular项目路由配置 #

import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
  {
    path: 'react-login',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:3303/remoteEntry.js',
        remoteName: 'portal',
        exposedModule: './Login'
      }).then(m => {
        console.log('Loaded remote module:', m);
        // 如何渲染React组件？
        // m.LoginComponent不存在，因为这是React组件
        return m.default; // 或者类似方式...
      })
  }
];

我的疑问：

1. 考虑到组件模型差异，通过Module Federation在Angular应用中渲染React代码是否可行？
2. 如果可行，可采用哪些策略（比如将React组件包装为Web Component或使用自定义适配器）实现集成？
3. 是否有最佳实践或示例展示如何搭建两个框架之间的桥接？

1. 可行性说明 #

完全可行。Webpack Module Federation仅负责跨应用的模块加载，将React模块代码注入Angular应用的运行环境；组件渲染的兼容性问题可通过额外桥接层解决，不会阻碍集成。

2. 具体集成策略 #

策略一：将React组件包装为Web Component #

Web Component是浏览器原生支持的框架无关组件标准，可实现跨框架复用。将React组件封装为Web Component后，可直接在Angular中作为自定义标签使用。

步骤示例：

• 在React项目中封装Web Component：

// React项目/src/web-components/login.web-component.js
import { r2wc } from '@r2wc/react-to-web-component';
import Login from './components/Login';

// 封装并定义可接收的属性/事件
const LoginWebComponent = r2wc(Login, {
  props: {
    onLoginSuccess: 'function'
  }
});

// 注册自定义元素
customElements.define('react-login-webc', LoginWebComponent);

// 修改React项目的Module Federation配置：
// exposes: { './LoginWebc': './src/web-components/login.web-component.js' }

• 在Angular项目中使用Web Component：

// Angular项目/src/app/react-login-wrapper/react-login-wrapper.component.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';

@Component({
  template: '<div #reactContainer></div>'
})
export class ReactLoginWrapperComponent implements OnInit {
  @ViewChild('reactContainer', { static: true }) container!: ElementRef;

  async ngOnInit() {
    // 加载远程Web Component模块
    await loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:3303/remoteEntry.js',
      remoteName: 'portal',
      exposedModule: './LoginWebc'
    });

    // 创建并挂载Web Component
    const loginWebc = document.createElement('react-login-webc');
    // 绑定事件
    loginWebc.addEventListener('onLoginSuccess', (e) => {
      console.log('登录成功', e.detail);
      // 处理Angular侧业务逻辑
    });
    this.container.nativeElement.appendChild(loginWebc);
  }
}

// 修改路由配置
const routes: Routes = [
  {
    path: 'react-login',
    component: ReactLoginWrapperComponent
  }
];

策略二：自定义Angular适配器组件 #

直接在Angular组件中使用ReactDOM.render挂载React组件，手动处理生命周期和数据传递。

步骤示例：

• 修改React项目的暴露内容：

// React项目/src/exposed/LoginExposed.js
import Login from '../components/Login';
export default Login;

// 修改Module Federation配置：
// exposes: { './Login': './src/exposed/LoginExposed.js' }

• 在Angular项目中创建适配器组件：

// Angular项目/src/app/react-login-adapter/react-login-adapter.component.ts
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';
import React from 'react';
import ReactDOM from 'react-dom';

@Component({
  template: '<div #reactRoot></div>'
})
export class ReactLoginAdapterComponent implements OnInit, OnDestroy {
  @ViewChild('reactRoot', { static: true }) reactRoot!: ElementRef;
  @Input() initialUser?: string;
  @Output() loginSuccess = new EventEmitter<any>();

  private reactComponentInstance: any;

  async ngOnInit() {
    // 加载远程React组件
    const module = await loadRemoteModule({
      type: 'module',
      remoteEntry: 'http://localhost:3303/remoteEntry.js',
      remoteName: 'portal',
      exposedModule: './Login'
    });
    const LoginComponent = module.default;

    // 渲染React组件并绑定数据/事件
    this.reactComponentInstance = ReactDOM.render(
      <LoginComponent 
        initialUser={this.initialUser}
        onLoginSuccess={(data) => this.loginSuccess.emit(data)}
      />,
      this.reactRoot.nativeElement
    );
  }

  ngOnDestroy() {
    // 卸载React组件，避免内存泄漏
    ReactDOM.unmountComponentAtNode(this.reactRoot.nativeElement);
  }
}

// 修改路由配置
const routes: Routes = [
  {
    path: 'react-login',
    component: ReactLoginAdapterComponent
  }
];

3. 最佳实践注意事项 #

• 共享依赖单例化：保持React、ReactDOM的singleton: true配置，避免重复加载导致的运行时冲突。
• 生命周期同步：无论采用哪种策略，都要确保React组件在Angular组件销毁时正确卸载，防止内存泄漏。
• 数据传递标准化：跨框架传递数据尽量使用JSON格式，事件传递使用原生浏览器事件或Angular的EventEmitter，保持接口清晰。
• 样式隔离：使用CSS Modules、Shadow DOM（Web Component模式）或Angular的ViewEncapsulation避免样式冲突。

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