Loading remote Angular MFE into React shell using Webpack's Module federation

Question

Can some one help me with an example to load remote Angular micro frontend application into React Shell using webpack's Module federation concept?

I have checked https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly/ where React is loaded in angular. But I am looking for other way.

Answer 1

With webpack, you can put the bootstrapping of angular app in a mount method and export this method. This must be done in another file to avoid conflicts for angular to run independently.

(Make sure to have the bootstrap.js file imported in main.ts, as used by module federation)

remote/src/load.ts

    const mount = ()=>{
              platformBrowserDynamic().bootstrapModule(AppModule)
                  .catch(err => console.error(err));
  
        export{mount}

expose this new file with webpack from angular

remote/webpack.config.ts

output: {
   scriptType: 'text/javascript',
},

plugins: [
    new ModuleFederationPlugin({
        name: "remoteMfe",
        filename: "remoteEntry.js",
        exposes: {
          './webcomponent':'./src/loadApp.ts',
        },   
})  

 

load the exposed module in react app using webpack

host/webpack.config.js

plugins: [
    new ModuleFederationPlugin(
      {
        name: 'host',
        filename:
          'remoteEntry.js',
        remotes: {
          RemoteMFE:
            'remoteMfe@http://localhost:3000/remoteEntry.js',
        },
      }
    ),

import the mount method that was exposed from angular remote and get the root element(i.e. ) from angular mfe. This can be used as a regular DOM element

host/src/Example.js

const ExampleComponent = () => {
  useEffect(() => {
    mount();  
  }, []);   
  return <div className="left-sidebar-module"><app-root></app-root></div>;
};