多回波角模块联邦不工作

Question

我已经能够创建一个具有多个微前端的monorepo项目，没有任何问题，但是我很难从不同的回购中添加一个微前端。

壳牌：

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

在过去的两天里，我一直困在这个问题上，所以如果有人能给我一张外部支票，我将不胜感激。提前感谢！快乐编码

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

对于我来说，工作方式如下：microfrontend1：创建新模块，而不是访问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"

必须有Shell路由

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

我如何帮助这个答案。:-)