1

We have a parent or host project which is on Angular JS and we are creating a new React app, and would like to integrate React app as MFE with the host project. We would not like to make lot of changes in the host project but wanted to check if we can use webpack/webpack module federation in the Angular JS project to do the MFE integration.

Thanks in advance for any examples or suggestions that you provide

StackHub
  • 67
  • 1
  • 1
  • 7

1 Answers1

2

What you are trying to do is not possible with Webpack 4 (unless you use the Single SPA JS library to polyfill support for MFEs). You will need Angular version 11 or higher (but I'd recommend version 12, as Webpack 5 support is stable in that version).

Some examples and references:

Crates
  • 2,362
  • 2
  • 19
  • 15
  • Thanks for the comments. I was also able to find a way without converting the host project to Single SPA or upgrade the Angular version. I published my standalone MFE React App using Webpack as a single bundle. Then, in the Angular JS app, I directly called the React Webpack bundled file(main.js) and was able to load React app inside Angular JS host app. However, it led into several styling issues with the main app – StackHub Mar 10 '22 at 11:06