загружать два разных приложения рядом на панели инструментов, используя Angular и Module Federation

Question

У меня есть 2 разных приложения Angular [Product View и Product Cart] и приложение-оболочка. Все 3 приложения размещены на разных портах. В приложении оболочки я интегрировал вышеуказанные приложения, используя федерацию модулей. Оба приложения прекрасно работают для разных маршрутов. Вот мой код маршрутизации приложения оболочки:

       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 в main.ts как

      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 и дополнительно реализовать errorcomponet в заполнителе [модуль ошибки] как

      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);
     })
  },