CODEWITHSUNDEEP
angularwebpack-module-federationangular-module-federation
Atul Verma
Atul Verma

Reputation: 401

Angular Module Federation: Not loading MFE from remote port

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),
  },
];

Upvotes: 0

Views: 4458

Answers (2)

Kamal Rathod
Kamal Rathod

Reputation: 1

the same issue i faced when i am trying to expose app.module.ts of micro frontend but this is not good practice.

Your have two options.

  1. ether remove browser module from the child app.
  2. expose specific module this is required (in shell app)

Upvotes: 0

Arny
Arny

Reputation: 21

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.

Upvotes: 1

Related Questions