Angular Module Federation: Not loading MFE from remote port

Question

I am working on angular module fedration for micro-frontend, most of the setup is done both Shell and MFE is parally working fine, But when I try to use the path for MFE I am getting below error:

ERROR Error: Uncaught (in promise): Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
Error: NG05100: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

Not sure what is gone wrong. My MFE webpack config file:

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "identity",

  exposes: {
    "./Module": "./projects/identity/src/app/app.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
    }),
  },
});

My webpack config for Shell:

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  remotes: {
    identity: "http://localhost:4201/remoteEntry.js",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
    }),
  },
});

Everything was auto generated because I used the CLI, Here's the route in Shell App:

import { Routes } from '@angular/router';
export const APP_ROUTES: Routes = [
  {
    path: 'identity',
    loadChildren: () => import('identity/Module').then((m) => m.AppModule),
  },
];

score 0 · Answer 1 · answered May 31 '23 at 11:54

Considering error message, the problem is that both, Shell and MFE exported module, are having BrowserModule in imports, but application must have just one of them.

So if you want applications being able to run as separate apps and as microfrontend app together: in MFE you should separate your code to 2 modules:

some my-export.module.ts - for exporting it in MFE webpack config:

@NgModule({imports:[CommonModule], exports:[RouterModule], ...})
export class MyExportModule
{
  ...
}

  exposes: {
    "./MyExportModule": "./projects/identity/src/app/my-export/my-export.module.ts"
  }

root app.module.ts - just empty wrapper for running MFE as separate application with routing to MyExportModule

var routes: Routes = [{
  path: '',
  loadChildren: () => import('./my-export/my-export.module.ts').then(m => m.MyExportModule)
}]

@NgModule({imports:[RouterModule.forRoot(routes)],...})
export class AppModule {}

Shell application will remain without changes.

So, as a result, Shell will import BrowserModule, and exported module - CommonModule.

Angular Module Federation: Not loading MFE from remote port

1 Answers1