I'm trying to build a micro-frontend project with React shell and Angular micro-frontend application.

I don't have any idea how to import remoteEntry.js into React component and use the web component generated by Angular Elements.

// 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;

My shell Module Federation config:

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

Catalog MFE Angular - Module Federation config:

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

Angular Elements Config:

@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);
  }
}

Please advise.