在Nx与Angular Architects架构下，自建React微前端加载到Angular宿主应用失败的问题排查

我已经用Nx搭建了两个单体仓库：

• 一个是Angular宿主 + Angular远程微前端，运行完全正常；
• 另一个是React宿主 + React远程微前端，也能正常工作。

但现在遇到了问题：把我自己的React远程微前端加载到Angular宿主应用时失败了。

我怀疑问题出在我的React微前端上——因为用Angular Architects提供的Demo URL（比如react路径配置的那个）就能正常加载，但换成我自己运行在本地Live Server的URL就不行。

现象细节 #

访问/microfront-react路径时加载失败，但在浏览器Network面板里能看到我的React微前端的remoteEntry.js已经被成功加载了。

关键配置代码 #

Angular宿主的app.routes.ts

import { Route } from '@angular/router';

import { loadRemoteModule } from '@nx/angular/mf';

import {
  WebComponentWrapper,
  WebComponentWrapperOptions,
} from '@angular-architects/module-federation-tools';

import { NotFoundError } from 'rxjs';

import { HomeComponent } from './home/home.component';

export const appRoutes: Route[] = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'microfront-angular',
    loadChildren: () =>
      loadRemoteModule('microfront-angular', './Module').then(
        (m) => m.RemoteEntryMfNg
      ),
  },
  {
    path: 'microfront-react',
    component: WebComponentWrapper,
    data: {
      // type: 'module',
      remoteEntry:
        'http://localhost:4301/remoteEntry.js',
      remoteName: 'microfront-react',
      elementName: 'microfront-react',
      exposedModule: './Module',
    } as WebComponentWrapperOptions,
  },
  {
    path: 'react',
    component: WebComponentWrapper,
    data: {
      remoteEntry:
        'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
      remoteName: 'react',
      elementName: 'react-element',
      exposedModule: './web-components',
    } as WebComponentWrapperOptions,
  },
  {
    path: 'vue',
    component: WebComponentWrapper,
    data: {
      remoteEntry:
        'https://mango-field-0d0778c10.azurestaticapps.net/remoteEntry.js',
      remoteName: 'vue',
      exposedModule: './web-components',
      elementName: 'vue-element',
    } as WebComponentWrapperOptions,
  },
  {
    path: '**',
    component: NotFoundError,
  },
];

上面配置里，microfront-react路径无法正常加载，但react路径（用Demo URL）可以正常工作。

React微前端的创建命令

nx g @nx/react:host host-react --remotes=microfront-react --style=scss

React微前端的bootstrap.tsx

import { StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './app/app';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

class MfeReact extends HTMLElement {
  connectedCallback() {
    console.log('web-component: bootstrap.tsx');
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  }
}

customElements.define('microfront-react', MfeReact);

React微前端的webpack.config.js

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config)
);

React微前端的module-federation.config.js

module.exports = {
  name: 'microfront-react',
  filename: 'remoteEntry.js',
  exposes: {
    './web-components': './src/remote-entry.ts',
  }
};

我的疑问 #

现在的webpack.config.js和module-federation.config.js配置是否足够正确打包出可用的remoteEntry.js？

希望这些信息能帮大家理解我的问题，非常感谢各位！

备注：内容来源于stack exchange，提问作者Fictor