Angular+React微前端Module Federation遇ScriptExternalLoadError求助

使用Angular 13、React、Webpack 5及Module Federation构建微前端，将远程Angular应用导入React宿主时，出现ScriptExternalLoadError: Loading script failed错误。已确认remoteEntry.js可通过http://localhost:8082/remoteEntry.js正常访问，尝试过清缓存、无痕模式等方案无效，以下是问题排查与修复方案：

Angular远程应用配置问题排查与修复 #

1. ModuleFederationPlugin配置不匹配 #

当前Angular的webpack配置中，ModuleFederationPlugin的name与library.name不一致，且与React宿主的remote配置不对应：

new ModuleFederationPlugin({
  name : 'cubs', 
  library: { type: 'var', name: 'profile' }, // 暴露的全局变量名为profile
  filename : 'remoteEntry.js',
  exposes : {
    './angular' : './src/bootstrap'
  }
}),

而React宿主的remote配置为angular : "angular@http://localhost:8082/remoteEntry.js"，期望全局变量名为angular，两者不匹配导致加载脚本后找不到对应变量，触发错误。

修复：将Angular端的library.name修改为angular，与React端remote名称保持一致：

new ModuleFederationPlugin({
  name : 'cubs',
  library: { type: 'var', name: 'angular' },
  filename : 'remoteEntry.js',
  exposes : {
    './angular' : './src/bootstrap'
  }
}),

2. 缺失模块联邦依赖 #

package.json中未包含@module-federation/client依赖，需安装：

npm install @module-federation/client --save-dev

3. Angular组件实例化方式错误 #

bootstrap.ts中直接new AppComponent()不符合Angular组件生命周期规则，组件需通过模块引导渲染到容器中。

修复：修改mount函数，正确引导Angular模块到指定容器，并注释掉单独的模块引导代码：

import 'zone.js';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';

export async function mount(container: HTMLElement, props: any) {
  // 引导模块到目标容器
  const moduleRef = await platformBrowserDynamic().bootstrapModule(AppModule);
  const appComponent = moduleRef.injector.get(AppComponent);
  container.appendChild(appComponent.elementRef.nativeElement);
  console.log("Component mounted");
  return moduleRef;
}

// 注释单独引导逻辑，避免Angular独立启动
// platformBrowserDynamic()
//   .bootstrapModule(AppModule)
//   .catch((err) => console.error(err));

4. Angular构建配置不完整 #

angular.json的serve配置未使用custom-webpack的dev-server，需补充：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "customWebpackConfig": {
      "path": "./custom-webpack.config.js"
    },
    "browserTarget": "your-project-name:build"
  }
}

React宿主应用配置问题排查与修复 #

1. 未正确导入远程模块的mount函数 #

React组件中直接使用mount但未正确导入远程模块，需通过模块联邦的远程模块导入。

修复：使用动态导入获取远程模块的mount函数，并添加卸载时的清理逻辑：

import React, { useRef, useEffect } from 'react';

const AngularAppWrapper = () => {
  const appRef = useRef(null);
  let moduleRef = null;

  useEffect(() => {
    // 动态导入远程Angular模块
    import('angular/angular').then(({ mount }) => {
      if (appRef.current) {
        moduleRef = mount(appRef.current, {});
      }
    });

    // 组件卸载时销毁Angular模块，防止内存泄漏
    return () => {
      if (moduleRef) {
        moduleRef.destroy();
      }
    };
  }, []);

  return <div ref={appRef} />;
};

export default AngularAppWrapper;

2. 确保remote配置与Angular端匹配 #

确认React的webpack-dev.config中remote配置的名称与Angular端library.name一致：

new ModuleFederationPlugin({
  name : 'container', 
  remotes : {
    reactapp : 'reactapp@http://localhost:8081/remoteEntry.js',
    angular : "angular@http://localhost:8082/remoteEntry.js"
  }
}),

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