使用 Angular 和 Module Federation 在仪表板中并排加载两个不同的应用程序

Question

我有 2 个不同的 Angular 应用程序 [产品视图和产品购物车] 和一个 shell 应用程序。所有 3 个应用程序都托管在不同的端口上。在 shell 应用程序中，我使用模块联合集成了上述应用程序。这两个应用程序完美适用于不同的路线。这是我的 shell 应用路由代码：

 const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children : [
      {
        path: '',
        outlet:'pView',
        loadChildren: () =>
          loadRemoteModule({
            remoteEntry: 'http://localhost:3000/remoteEntry.js',
            remoteName: 'mfe1',
            exposedModule: './Module',
          }).then((m) => {
            return m.MicrofrontendModule;
          }),
      },
      {
        path: '',
        outlet:'pCart',
        loadChildren: () =>
          loadRemoteModule({
            remoteEntry: 'http://localhost:7000/remoteEntry.js',
            remoteName: 'mfe2',
            exposedModule: './Module1',
          }).then((m) => {
            return m.Microfrontend1Module;
          }).catch(err => console.log('Error loading remote entries', err)),
      },    
    ],
    pathMatch: 'full',
  },
  {
    path: 'child',
    outlet:'',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:8000/remoteEntry.js',
        remoteName: 'mfe3',
        exposedModule: './Module3',
      }).then((m) => {
        return m.Microfrontend2Module;
      }),
  },
];

我的 html 加载以上 2 个应用程序的代码如下：

<div class="container" style="width: 99%;">
<table class="table" style="width:100%;margin-top: 0px; border: 2px solid white">
  <tbody>
    <tr>
      <td>
        <div style="width: 500px; height: 370px; border: 1px solid rosybrown">
          <router-outlet name="pView"></router-outlet>
        </div>
      </td>
      <td>
        <div style="width: 500px; height: 370px; border: 1px solid green">
          <router-outlet name="pCart"></router-outlet>
        </div>
      </td>
    </tr>

它工作正常，但在我的一个远程应用程序关闭后出现以下错误。

获取 http://localhost:7000/remoteEntry.js net::ERR_CONNECTION_REFUSED

我曾尝试在 Shell app Bootstrap in main.ts as

之前加载远程应用程序

import { loadRemoteEntry } from '@angular-architects/module-federation';

Promise.all([
   loadRemoteEntry('http://localhost:3000/remoteEntry.js','mfe1'),
   loadRemoteEntry('http://localhost:7000/remoteEntry.js','mfe2'),
   loadRemoteEntry('http://localhost:8000/remoteEntry.js','mfe3')       
])
.catch(err => console.log('Error loading remote entries', err))
.then(() => import('./bootstrap'))
.catch(err => console.log(err));


// import('./bootstrap').catch(err => console.error(err));

但仍然出现同样的错误。任何人都请帮助我。

Answer 1

解决方案是在catch中提供一个placeholder模块，进一步在placeholder [error module]中实现errorcomponet as

loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:8000/remoteEntry.js',
        remoteName: 'mfe3',
        exposedModule: './Module3',
      }).then((m) => {
        return m.Microfrontend2Module;
      })
      .catch(e => {
        return import('src/app/placeholder/error.module').then(m => m.ErrorModule);
     })
  },

使用 Angular 和 Module Federation 在仪表板中并排加载两个不同的应用程序

load two different apps side by side in dashboard using Angular and Module Federation

angular

webpack-5

webpack-module-federation

angular-module-federation