reactjs - ModuleFederationPlugin for React and Angular combined

Question

I'm currently investigating the 'micro front end' solution provided by webpack 5 using the ModuleFederationPlugin. I have managed to get it working using React so essentially i have App1 that pulls a component from App2:

exposes: {
  "./Header": "./src/Header",
}

In App1 it is consumed like:

const Header = React.lazy(() => import('reactApp/Header'));

And this works fine.

What i'm trying to do now is inject some Angular in. Not sure if this is even possible but feel like i've come close. However all the example i have found with Angular hook into the router outlet.

Getting it to work the most basic i expose the module:

 exposes: {
            './Module': './projects/mfe1/src/app/flights/flights.module.ts',
        }

then import into App1 the same way as the App2:

const FlightsModule = React.lazy(() => import('mfe1/Module'));

(tried with and without .then(m => m.FlightsModule))

and then try to display it using

 <React.Suspense fallback='Loading Angular'>
        <FlightsModule></FlightsModule>
      </React.Suspense>

Then one of the errors is:

Warning: lazy: Expected the result of a dynamic import() call. Instead received: [object Module]

    Your code should look like: 
      const MyComponent = lazy(() => import('./MyComponent'))
    printWarning @ react.development.js:220
   ...
    react-dom.development.js:17733 Uncaught Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.
        at mountLazyComponent (react-dom.development.js:17733)

I've tried many combinations and googled lots of things but to no avail.

• Is the React and Angular combination even possible?
• Any fixes to display the Angular module?
• Is there an easier way to display an Angular component / module?

---

UPDATE

I've created the repo's to run, the readme has the build instructions.

https://github.com/dale-waterworth/micro-front-end-react - localhost:3001

https://github.com/dale-waterworth/micro-front-end-angular - localhost:4201 (ng serve mdmf-profile)

https://github.com/dale-waterworth/micro-front-end-container - localhost:3002

Ensure to run the micro-front-end-container last.

I'm trying to add the component into the container in App.tsx and this is where i've tried lots of this. Also in the dev tools network tab, you can see that the code is being picked up.

标签： reactjsangularwebpack-5