Load React mfe into Angular host with Nx and Angular Architects

I have created a monorepo with Nx, featuring an Angular host and an Angular remote, and this works perfectly. I also have another monorepo with a React host and a React remote, which also work.

This is the complete APP

The issue arises when I try to load the remote React microfrontend into the Angular host.

I believe the problem lies within the React microfrontend because if I use the demo URL from Angular Architects URL, it works fine, but it doesn't work with my own URL that is running on a Live Server.

My app.routes.ts

import { Route } from '@angular/router';
import { loadRemoteModule } from '@nx/angular/mf';
import {
WebComponentWrapper,
WebComponentWrapperOptions,
} from '@angular-architects/module-federation-tools';
import { NotFoundError } from 'rxjs';
import { HomeComponent } from './home/home.component';

export const appRoutes: Route[] = [
{
path: '',
component: HomeComponent,
},
{
path: 'microfront-angular',
loadChildren: () =>
loadRemoteModule('microfront-angular', './Module').then(
(m) => m.RemoteEntryMfNg
),
},
{
path: 'microfront-react',
component: WebComponentWrapper,
data: {
// type: 'module',
remoteEntry:
'http://localhost:4301/remoteEntry.js',
remoteName: 'microfront-react',
elementName: 'microfront-react',
exposedModule: './Module',
} as WebComponentWrapperOptions,
},
{
path: 'react',
component: WebComponentWrapper,
data: {
remoteEntry:
'https://witty-wave-0a695f710.azurestaticapps.net/remoteEntry.js',
remoteName: 'react',
elementName: 'react-element',
exposedModule: './web-components',
} as WebComponentWrapperOptions,
},
{
path: 'vue',
component: WebComponentWrapper,
data: {
remoteEntry:
'https://mango-field-0d0778c10.azurestaticapps.net/remoteEntry.js',
remoteName: 'vue',
exposedModule: './web-components',
elementName: 'vue-element',
} as WebComponentWrapperOptions,
},
{
path: '**',
component: NotFoundError,
},
];



microfront-react dont'works but react works

This happens when try to access to microfront-react



But I still see remoteEntry.js from my build on Network...



The command to create my React microfront was:

nx g @nx/react:host host-react --remotes=microfront-react --style=scss


My apps/microfront-react/src/bootstrap.tsx

import { StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';

import App from './app/app';

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

class MfeReact extends HTMLElement {
connectedCallback() {
console.log('web-component: bootstrap.tsx');

root.render(
<StrictMode>
<App />
</StrictMode>
);
}
}

customElements.define('microfront-react', MfeReact);


I think that maybe the fail is in the webpack.config.js and module-federation.config.js from my microfront-react

webpack.config.js

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
withNx(),
withReact(),
withModuleFederation(config)
);


module-federation.config.js

module.exports = {
name: 'microfront-react',
filename: 'remoteEntry.js',
exposes: {
'./web-components': './src/remote-entry.ts',
}
};



With that lines is enought to package correctly the remoteEntry.js?

Hope this helps to undertand my problem and thanks a lot to all people!!!

Source and thx:

Angular-architects Lerna

Nx

Continue reading...