具有多个 repo 的 Angular 模块联合不起作用答案

【问题标题】：Angular Module Federation with multiple repo not working具有多个 repo 的 Angular 模块联合不起作用
【发布时间】：2022-08-07 07:01:07
【问题描述】：

我已经能够创建一个带有多个微前端的 monorepo 项目而没有任何问题，但我正在努力从不同的 repo 添加一个微前端。

壳：

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>

应用程序.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\',
        },        
    }),
  ],
};

应用程序.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 { }

在过去的两天里，我一直坚持这一点，因此，如果有人可以进行外部检查，将不胜感激。提前致谢！快乐编码

我也被上述情况所困扰，试图将模块联合添加到多仓库角度代码库中并且它不起作用..你身边有运气吗？
回答@Prats :) 希望对您有所帮助！

标签： javascript angular micro-frontend webpack-module-federation angular-module-federation

【解决方案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 { }

【讨论】：

您有上述更改的参考资料吗？
对于其他人，请参考github.com/Hulk914/moduleFederation 项目适用于使用 angular-architects 模块联合的多仓库

【解决方案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
},

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

【讨论】：