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

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