Angular宿主应用无法加载React微前端应用问题求助

问题诊断 #

浏览器抛出的TypeError是因为原生ES模块加载器无法识别Module Federation自定义的remoteApp@http://localhost:8081/remoteEntry.js格式，同时你误用了Angular路由的loadChildren加载React组件（该方法仅支持加载Angular NgModule），这两个问题共同导致加载失败。

解决方案 #

1. 用Angular官方插件配置Module Federation #

手动配置Webpack容易适配失败，先安装官方支持的模块联邦插件：

ng add @angular-architects/module-federation

插件会自动配置Angular的Webpack构建链，注入Module Federation运行时，避免原生模块加载器的解析问题。

2. 修正宿主remotes配置 #

在生成的module-federation.config.js中保持如下配置：

export const remotes = {
  remoteApp: 'remoteApp@http://localhost:8081/remoteEntry.js'
};

3. 封装React组件为Angular组件 #

创建Angular组件作为React应用的容器，避免直接用路由加载React组件：

1. 生成容器组件：

ng generate component remote-react-wrapper

2. 在组件中加载并渲染React应用：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-remote-react-wrapper',
  template: '<div #reactRoot></div>',
  styles: []
})
export class RemoteReactWrapperComponent implements OnInit {
  @ViewChild('reactRoot', { static: true }) reactRoot!: ElementRef;

  async ngOnInit(): Promise<void> {
    // 加载远程React组件
    const remoteModule = await import('remoteApp/App');
    const ReactApp = remoteModule.App;

    // 加载共享的React和ReactDOM
    const React = await import('react');
    const ReactDOM = await import('react-dom/client');

    // 将React组件渲染到Angular DOM节点
    const root = ReactDOM.createRoot(this.reactRoot.nativeElement);
    root.render(React.createElement(ReactApp));
  }
}

4. 修改路由配置 #

将路由指向封装后的Angular组件，替换原来的loadChildren配置：

// app.routes.ts
import { Routes } from '@angular/router';
import { RemoteReactWrapperComponent } from './remote-react-wrapper/remote-react-wrapper.component';

export const routes: Routes = [
  // 其他路由...
  {
    path: 'remotePath',
    component: RemoteReactWrapperComponent
  }
];

5. 检查远程应用配置 #

确保React微前端的Webpack配置正确，暴露的组件路径准确，共享依赖设置为单例：

// React应用webpack.config.js
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './App': './src/singleSpaEntry' // 确认路径指向你的React组件入口
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: pkg.dependencies.react
    },
    'react-dom': {
      singleton: true,
      requiredVersion: pkg.dependencies['react-dom']
    }
  }
})

6. 验证基础访问性 #

• 确保http://localhost:8081/remoteEntry.js可正常访问
• 若跨域，在React应用的开发服务器中配置CORS（比如webpack-dev-server的allowedHosts: 'all'或设置headers）

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