在 React shell 应用程序中使用 Angular Elements MFE Web 组件

Question

我正在尝试使用 React shell 和 Angular 微前端应用程序构建一个微前端项目。

我不知道如何将 remoteEntry.js 导入 React 组件并使用 Angular Elements 生成的 Web 组件。

// const Catalog = React.lazy(() => import('HorizontalCatalogMfe/web-components'));

export function App() {
  return (
    <>
      <h1>horizontal-shell-react</h1>
      <div />

      {/* not working :( */}
      <horizontal-catalog-mfe></horizontal-catalog-mfe>
    </>
  );
}

export default App;

我的 shell 模块联合配置：

plugins: [
  new ModuleFederationPlugin({
    name: 'HorizontalShellReact',
    remotes: {
      HorizontalCatalogMfe: 'HorizontalCatalogMfe@http://localhost:4201/remoteEntry.js',
    },
  })
]

目录 MFE Angular - 模块联合配置：

plugins: [
  new ModuleFederationPlugin({
    name: 'HorizontalCatalogMfe',
    exposes: {
      './web-components': 'apps/horizontal-catalog-mfe/src/bootstrap.ts'
    },
    filename: 'remoteEntry.js',
  })
]

Angular Elements 配置：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([], { initialNavigation: 'enabledBlocking' }),
    RemoteEntryModule,
  ],
  providers: [],
  //bootstrap: [AppComponent],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const ce = createCustomElement(RemoteEntryComponent, {
      injector: this.injector,
    });
    customElements.define('horizontal-catalog-mfe', ce);
  }
}

请告知。