Module Federation Microfrontends with Angular and React

Traditionally, web applications have often been tied to a single framework. However, modern development trends favor flexibility and the ability to utilize the best tools for the job. Module federation unlocks the potential to combine the strengths of different frameworks within a unified application. In this article, we'll explore how to leverage module federation, allowing an Angular application to dynamically consume a component built in React.

This article is part of the following article:

Key Concepts

• Module Federation: A webpack 5 plugin enabling the ability to load separately compiled and deployed code modules at runtime.
• Host: The main application (here, Angular) that consumes remote components.
• Remote: Self-contained modules (here, React) that are exposed and consumed by the host.

Steps

Project Setup

Angular Host:

Ensure you have an existing Angular project. If not, create one using the Angular CLI (ng new angular-host).

ng new angular-host        

React Remote:

Create a React project by following the steps in the following article/ video: (create-mf-app)

npx create-mf-app        

Webpack Configuration (Angular Host)

Install Module Federation plugin:

cd angular-host

npm install @angular-architects/module-federation --save-dev        

Add Module Federation

ng add @angular-architects/module-federation        

Modify the generated webpack.config.js:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
// ... other webpack config

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'angularHost',
      filename: 'remoteEntry.js',
      remotes: {
        reactRemote: 'reactRemote@https://localhost:3001/remoteEntry.js' // Update with the React remote URL
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'] // Add other shared libs as needed
    })
  ],
};
        

Webpack Configuration (React Remote)

Install Module Federation plugin:

npm install webpack @types/webpack --save-dev        

Create or modify webpack.config.js:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'reactRemote',
      filename: 'remoteEntry.js',
      exposes: {
        './MyComponent': './src/app/MyComponent' // Expose your React component
      },
      shared: ['react', 'react-dom', 'react-router-dom'] // Or other shared libs
    })
  ],
};
        

Expose React Component

In your React project, ensure the component to be shared is exported correctly for Module Federation usage.

Follow the following article to Expose a Button in MFE1

Consuming the Component (Angular Host)

In your Angular app, import the remote component dynamically:

import('reactRemote/MyComponent').then(module => {
  const MyComponent = module.MyComponent;
  // Use the MyComponent React component within your Angular template
});
        

How Module Federation Bridges the Gap

• Wrapper Component: Module federation allows you to create a thin Angular wrapper component that dynamically loads and renders the React component. This wrapper handles the translation of inputs/outputs between the frameworks if required.
• Lifecycle Management: While Angular manages the wrapper component, the loaded React component retains its own lifecycle and internal state management within its boundaries.

In Essence

Module federation provides a way to use independently built and deployed React components within the context of an Angular application, making them accessible to the Angular host. This integration isn't a seamless transpilation of React code into Angular code but a clever orchestration of separately managed modules.

Important Considerations

• Version Compatibility: Maintain similar versions of shared dependencies across host and remote projects to avoid potential conflicts.
• Development: Run both Angular and React development servers concurrently. Configure the Angular app to proxy requests for the remote component to the React server.

Additional Tips

• Cross-Framework Communication: Implement a communication mechanism (e.g., custom events, shared state management) if needed for interaction between Angular and React components.
• Error Handling: Implement robust error handling to gracefully handle situations where the remote module fails to load.

Additional Resources: