Angular Module Federation с несколькими репо не работает

Question

Мне удалось создать проект монорепозитория с несколькими микроинтерфейсами без каких-либо проблем, но я изо всех сил пытаюсь добавить микроинтерфейс из другого репо.

Оболочка:

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:

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 { }

Я застрял на этом в течение последних 2 дней, поэтому, если кто-нибудь может дать внешний чек, он был бы очень признателен. Заранее спасибо! Удачного кодирования

Answer 1

У нас, как обычно, проблема была в простом изменении кода на пульте /mfe:

Вместо того, чтобы определять RouterModule как «forRoot», правильным способом его установки было «forChild». Так просто!

Репозиторий MFE:

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 { }

Answer 2

У меня работает так:: создать новый модуль без доступаappмодуль

webpack.config-> изmicrofrontend1 module.exports -> exposes

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

mf.manifest.jsonу тебя должно быть что-то подобное

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

Маршрутизация оболочки, которую вы должны иметь

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

Я как помочь этот ответ. :-)