Nx monorepo with react host and mixed angular and react microfontends (MFE) using module federation

Question

We have an Nx mono repo with a react host app. Not all teams work in this repository, especially some using angular. I've seen StackOverflow Q/A and other articles on importing angular micro-frontends (MFEs) into react host apps, so it should work. But for the angular teams I wanted to try to setup an Nx monorepo with a simpler react host suitable for developing the angular MFE with less likelihood of problems when eventually imported into the real app. One of the goals would have HMR/cross app browser updates without rebuilding, but this description does not get that far. I've tried the following with Nx 15.9.5 and 16.7.4 which exhibit the same behavior.

Cannot align the angular remoteEntry.mjs file with the host expectation of remoteEntry.js

Steps:

npx create-nx-workspace@15.9.5 react-ng-nx Chose react and used a throwaway app name
npx nx g @nrwl/react:host rxhost --remotes=react-mfe
Install @nrwl/angular
npx nx g @nrwl/angular:remote ng-mfe --host=rxhost
Edit apps/ng-mfe/project.json to update port values from 4201 to 4202, so far this is the only change to config files.
nx run rxhost:serve

All three dev servers start up without any errors reported. The host and the react-mfe apps are visible via http://localhost:4200. ng-mfe is not yet added to app.tsx, but http://localhost:4202 shows the angular app and http://localhost/remoteEntry.mjs returns the expected webpack contents. Continuing...

Edit the rxhost app.tsx to add the ng-mfe nav link and Route. The important bit:

const NgMfe = React.lazy(() => import('ng-mfe/Module'));

Restarted the servers as devRemotes is not configured yet. (Other than the 4202 port, config files are stock as generated.) I restarted the server(s) after every config change mentioned below:

Getting a 404 error looking for http://localhost:4202/remoteEntry.js

Many examples here and elsewhere show a filename config, so I tried the following in apps/ng-mfe/module-federation.config.js:

module.exports = {
  name: 'ng-mfe',
  filename: 'remoteEntry.js',
  exposes: {
    './Module': 'apps/ng-mfe/src/app/remote-entry/entry.module.ts',
  },
};

This has no effect on the build, still get remoteEntry.mjs. Wondered if this was just angular, so I tried the same with the react-mfe.

module.exports = {
  name: 'react-mfe',
  filename: 'foo.js',
  exposes: {
    './Module': './src/remote-entry.ts',
  },
};

The file still ends up being named remoteEntry.js. I also tried messing up the exposes path and get a build error, so the files are being used, it just seems the filename property is ignored. I've tried modifying the remotes value in rxhost's module-federation.config.js, but it seems the dev server expects a simple string array matching the names of the mfes and no ability to configure a different url.

I've seen mention of a module-federation.manifest.json file, but likely do not follow exactly how it works. I tried adding it to src/assets in ng-mfe: { "filename": "remoteEntry.mjs" } The file is available via http://localhost:4202/assets/module-federation.manifest.json. rxhost is still looking for http://localhost:4202/remoteEntry.js

I cannot find any way to correct the remote entry filename, either in rxhost or ng-mfe.

It seems so close to working, so hopefully it is just a matter of a little configuration and others have an Nx setup with react and angular MFEs working in development.

Nx monorepo with react host and mixed angular and react microfontends (MFE) using module federation

0 Answers0