How can I load a React micro remote in an Angular shell using Module Federation?

I'm working on two independent projects that use a micro frontend architecture and are both deployed to the same S3 bucket, but they are completely separate:

1. 
   Angular Portal: An orchestrator shell built in Angular that uses micro frontends.
   
   
2. 
   React Portal: A standalone project built in React that also uses micro frontends via Webpack Module Federation.
   

My goal is to have the Angular shell load a remote module from the React project and display it within its routing system. However, I'm aware that Angular and React have completely incompatible component models.

I've configured Webpack Module Federation in both projects. In the React project, I expose a remote module (for example, a React component for a login page) as follows:

// In React project's webpack.config.js (React Portal)
new ModuleFederationPlugin({
name: 'portal',
filename: 'remoteEntry.js',
exposes: {
'./Bootstrap': './src/main.js' // Exposing the Login component
},
shared: {
react: { singleton: true, requiredVersion: '^17.0.0' },
'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
}
})


In the Angular project, I attempted to load the remote module using the @angular-architects/module-federation package:

// In Angular routing module
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
{
path: 'react-login',
loadChildren: () =>
loadRemoteModule({
type: 'module',
remoteEntry: 'http://localhost:3303/remoteEntry.js',
remoteName: 'portal',
exposedModule: './Login'
}).then(m => {
console.log('Loaded remote module:', m);
// How can I render a React component here?
// m.LoginComponent does not exist because it's a React component.
return m.default; // Or similar...
})
}
];


I need to render the React component (e.g., a login form) inside the Angular shell. I understand that the component models are incompatible, so I'm wondering what approach would allow me to integrate or render the React component within an Angular route.

Questions:

1. 
   Is it even feasible to render React code inside an Angular application using Module Federation, given the component model differences?
   
   
2. 
   If so, what strategies can be employed (e.g., wrapping the React component as a Web Component, or using a custom adapter) to achieve this integration?
   
   
3. 
   Are there best practices or examples that show how to bridge the two frameworks effectively?
   

Continue reading...