Integrating a React template as a micro frontend into an Angular project

Hi guys how are you? Welcome back to my blog and today in this blog post I am going to Integrating a React template as a micro frontend into an Angular project.

Angular 19 came. If you are new then you must check below two links:

• Angular 19 Basic Tutorials
• Free Angular Admins

Now guys here is the complete code snippet and please follow carefully:

Integrating a React template as a micro frontend into an Angular project can be done using Module Federation (Webpack 5) or iframe/web components. Here’s a structured approach:

1. Choose an Integration Method

• Webpack Module Federation (Best for seamless integration)
• Web Components (Encapsulated and reusable)
• Iframe (Easiest, but limited interactivity)

2. Setup React as a Micro Frontend (MFE)

(a) Create React App with Module Federation

1. Create a new React app:

   npx create-react-app react-mfe --template typescript

2. Install Webpack Module Federation:

   npm install @module-federation/webpack-module-federation-plugin

3. Modify webpack.config.js:

   const { ModuleFederationPlugin } = require("webpack").container;

   module.exports = {
     entry: "./src/index",
     mode: "development",
     devServer: {
       port: 3001, // Ensure unique port
     },
     output: {
       publicPath: "http://localhost:3001/",
     },
     plugins: [
       new ModuleFederationPlugin({
         name: "reactMFE",
         filename: "remoteEntry.js",
         exposes: {
           "./ReactApp": "./src/App",
         },
         shared: require("./package.json").dependencies,
       }),
     ],
   };

4. Modify src/index.tsx:

   import React from "react";
   import ReactDOM from "react-dom";

   import App from "./App";

   ReactDOM.render(<App />, document.getElementById("root"));

5. Run the React app:

   npm start

3. Integrate React MFE into Angular

(a) Modify Angular Webpack

1. Install Webpack Module Federation for Angular:

   ng add @angular-architects/module-federation

2. Modify webpack.config.js:

   const { ModuleFederationPlugin } = require("webpack").container;

   module.exports = {
     plugins: [
       new ModuleFederationPlugin({
         remotes: {
           reactMFE: "reactMFE@http://localhost:3001/remoteEntry.js",
         },
       }),
     ],
   };

3. Load React Component in Angular Component:

   import { loadRemoteModule } from '@angular-architects/module-federation';

   async ngOnInit() {
     const ReactApp = await loadRemoteModule({
       remoteEntry: 'http://localhost:3001/remoteEntry.js',
       remoteName: 'reactMFE',
       exposedModule: './ReactApp',
     });
     // Render React component inside Angular
   }

4. Alternative: Use Web Components

1. Convert React app into Web Component using react-to-webcomponent:

   npm install react-to-webcomponent

2. Wrap App.tsx:

   import React from "react";
   import ReactToWebComponent from "react-to-webcomponent";

   const WebComponent = ReactToWebComponent(App, React, ReactDOM);
   customElements.define("react-app", WebComponent);

3. Use in Angular:

   <react-app></react-app>

5. Run & Test

• Start React MFE (npm start in react-mfe).
• Start Angular Host (ng serve).
• Open http://localhost:4200 and see React inside Angular.

Would you like a more detailed breakdown on a specific method? 🚀

Feel free to comment below.

Ajay

Thanks