具有多个回购的角度模块联合会不起作用

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 repo：

webpack.config.js < /strong>

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上的一个简单的代码更改：

而不是将Routermotule定义为“ 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 - ＆gt;来自Microfrontend1 module.exports-＆gt;公开

'./ module'：'./projects/mfe1/src/app/flights/flights/flights.module.ts'

mf.manifest.json您如果您有类似“帧”之类的东西

：“ http：// localhost：4201/emoteNtry.js”

shell路由，您必须有

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

我如何帮助此答案。 :-)