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

I have 2 different Angular apps [Product View and Product Cart] and a shell application. All 3 apps are hosted on different ports. In the shell application I have integrated above apps using module federation. Both apps perfectly work for different routes. Here is my shell app routing code:

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

And my html code to load above 2 apps is as below :

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

It is working fine but I am getting below error after one of my remote app is down.

GET http://localhost:7000/remoteEntry.js net::ERR_CONNECTION_REFUSED

I have tried to load remote apps before 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));

But still getting same error. Anyone kindly help me on this.

The solution is to provide a placeholder module in catch and further implement errorcomponet in placeholder [error module] 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);
     })
  },