Manually add React remote MFE to Angular host

Author: angularexample

apps/host/public/module-federation.manifest.json

@@ -1,4 +1,5 @@
 {
   "remote1": "http://localhost:4201/mf-manifest.json",
-  "remote2": "http://localhost:4202/mf-manifest.json"
+  "remote2": "http://localhost:4202/mf-manifest.json",
+  "remote3": "http://localhost:4203/mf-manifest.json"
 }

apps/host/src/app/app.html

@@ -2,5 +2,6 @@
   <li><a routerLink="/">Home</a></li>
   <li><a routerLink="remote1">Remote1</a></li>
   <li><a routerLink="remote2">Remote2</a></li>
+  <li><a routerLink="remote3">Remote3</a></li>
 </ul>
 <router-outlet></router-outlet>

apps/host/src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { NxWelcome } from './nx-welcome';
 import { Route } from '@angular/router';
 import { loadRemote } from '@module-federation/enhanced/runtime';
+import { ReactWrapper } from './react-wrapper/react-wrapper';
 
 export const appRoutes: Route[] = [
   {
@@ -17,6 +18,14 @@ export const appRoutes: Route[] = [
         (m) => m!.remoteRoutes
       ),
   },
+  {
+    path: 'remote3',
+    component: ReactWrapper, // the Angular wrapper component which will load any React web component
+    data: {
+      elementName: 'wc-remote3', // the name of the custom element which is a React web component
+      loadChildren: () => import('remote3/Module'), // the dynamic import of the React web component
+    },
+  },
   {
     path: '',
     component: NxWelcome,

apps/host/src/app/react-wrapper/react-wrapper.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactWrapper } from './react-wrapper';
+
+describe('ReactWrapper', () => {
+  let component: ReactWrapper;
+  let fixture: ComponentFixture<ReactWrapper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactWrapper],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReactWrapper);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/host/src/app/react-wrapper/react-wrapper.ts

@@ -0,0 +1,19 @@
+import { AfterContentInit, Component, ElementRef, inject, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-react-wrapper',
+  template: '<div #reactWrapper></div>',
+})
+export class ReactWrapper implements AfterContentInit {
+  @ViewChild('reactWrapper', { read: ElementRef, static: true }) reactWrapper!: ElementRef;
+  private route: ActivatedRoute = inject(ActivatedRoute);
+
+  async ngAfterContentInit(): Promise<void> {
+    const elementName = this.route.snapshot.data['elementName'];
+    const loader = this.route.snapshot.data['loadChildren'];
+    await loader();
+    const element = document.createElement(elementName);
+    this.reactWrapper.nativeElement.appendChild(element);
+  }
+}

apps/host/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,

apps/remote3/src/app/app.tsx

@@ -1,6 +1,7 @@
 // Uncomment this line to use CSS modules
 // import styles from './app.module.scss';
 import NxWelcome from './nx-welcome';
+import r2wc from '@r2wc/react-to-web-component';
 
 export function App() {
   return (
@@ -10,4 +11,15 @@ export function App() {
   );
 }
 
+export function defineReactWebComponent() {
+  // Define the new custom element with the element name for the React Web Component.
+  if (!customElements.get('wc-remote3')) {
+    if (!customElements.get('wc-remote3')) {
+      // This is where we convert the React component to a Web Component
+      customElements.define('wc-remote3', r2wc(App));
+    }
+  }
+}
+
+defineReactWebComponent();
 export default App;

nx.json

@@ -116,6 +116,9 @@
         "style": "scss",
         "linter": "eslint"
       }
+    },
+    "@nx/angular:component": {
+      "style": "css"
     }
   }
 }

package-lock.json

@@ -28,6 +28,7 @@
     "@nx/workspace": "21.4.1",
     "@playwright/test": "^1.36.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@r2wc/react-to-web-component": "^2.0.4",
     "@schematics/angular": "~20.1.0",
     "@svgr/webpack": "^8.0.1",
     "@swc-node/register": "~1.9.1",