Angular Module Federation with multiple repo not working

Question

I've been able to create a monorepo project with several micro frontends without any issues, but I'm struggling to add a micro frontend from a different repo.

Shell:

webpack.config.js

 new ModuleFederationPlugin({
      library: { type: "module" },
        
      remotes: {
          "mfe1": "mfe1@http://localhost:3000/remoteEntry.js", //mfe from same repo as shell
          "mfe2": "mfe2@http://localhost:2000/remoteEntry.js", //mfe from same repo as shell
          "mfe-repo": "mfe-repo@http://localhost:4200/remoteEntry.js", //mfe from different repo as shell
      },

sidebar.component.html

<a class="" routerLink="/dandylion/dandylion-overview" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
 <span>Dandylion</span>
    </a>
    <a class="home" routerLink="/snafu/snafu-overview" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
      <span>Snafu</span>
    </a>
 <a routerLink="/mfe-repo" routerLinkActive="linkactive" routerLinkActiveOptions="{ exact: false }">
      <span>MFE Repo</span>
    </a>

app.routes.ts

 {
      path: 'dandylion',
      loadChildren: () => loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:3000/remoteEntry.js',
          exposedModule: './Module'
        })
        .then(m => m.DandylionModule) 
    },
    {
      path: 'snafu',
      loadChildren: () => loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:2000/remoteEntry.js',
          exposedModule: './Module'
        })
        .then(m => m.SnafuModule) 
    },
 {
      path: 'mfe-repo',
      loadChildren: () => loadRemoteModule({
          type: 'module',
          remoteEntry: 'http://localhost:4200/remoteEntry.js',
          exposedModule: './Module'
        })
        .then(m => m.AppModule) 
    },

MFE Repo:

webpack.config.js

module.exports = {
  output: {
    uniqueName: "mfe-repo",
    publicPath: "http://localhost:4200/"
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },
        name: "mfe-repo",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './src/app/app.module.ts',
        },        
    }),
  ],
};

app.routes.ts

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

export const APP_ROUTES: Routes = [
    { path: 'mfe-repo', component: AppComponent, pathMatch: 'full'},
];

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(APP_ROUTES),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I'm stuck at this for the last 2 days, so if anyone can give a outside check, it would be greatly appreciated. Thanks in advance! Happy coding

I am also stuck with the above scenario, trying to add module federation to a multi repo angular code base and its not working..is there any luck in your side ? — Prats
– Prats, Commented May 23, 2022 at 15:07
LuisPLSP, @Prats, when you guys say it is not working, what is not working? How does it manifest itself? — Jan Dolejsi
– Jan Dolejsi, Commented Jan 21, 2024 at 11:10
I have added module federation to multi repo approach. Unfortunately I am stuck on how to share the state between these separate repos (shell, mfe1, mfe2). 1. Not planned to migrate to Nx Monorepo approach 2. Not planned to publish a NPM package to sharing module Any help or suggestion is appreciated. — selan dimantha
– selan dimantha, Commented Feb 6, 2024 at 19:54

LuisPLSP · Accepted Answer · 2022-05-25 09:28:56Z

3

We'll, as usual, the problem was a simple code change on the remote/mfe:

Instead of defining the RouterModule as 'forRoot', the correct way to set it was 'forChild'. As easy as that!

MFE Repo:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { APP_ROUTES } from './app.routes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forChild(APP_ROUTES), // fix is here

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered May 25, 2022 at 9:28

LuisPLSP

2033 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajat Over a year ago

Do you have reference available for above changes ?

Rajat Over a year ago

For others reference github.com/Hulk914/moduleFederation project works fine for multi repo using angular-architects module federation

IsraGab Over a year ago

The answer you gave looks strange. I'm facing the same issue and will try what you gave. But if it works how can you explain it works with forRoot in monorepo?

NsdHSO · Accepted Answer · 2022-08-06 23:01:07Z

0

For me works like that: microfrontend1: create new module not access app module

webpack.config -> from microfrontend1 module.exports -> exposes

'./Module': './projects/mfe1/src/app/flights/flights.module.ts'

mf.manifest.json you should you have something like that

"frame":"http://localhost:4201/remoteEntry.js"

Shell routing you must have

{
path: 'frame',
loadChildren: () =>
  loadRemoteModule({
    remoteName: 'frame',
    type:"manifest",
    exposedModule: './Module',
  })
    .then((m) => m.FlightsModule), !=> m.AppModule
},

I how to help this answer. :-)

answered Aug 6, 2022 at 23:01

NsdHSO

1531 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular Module Federation with multiple repo not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related