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

Question

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

      const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full',
  },
  {
    path: 'abc',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:3000/remoteEntry.js',
        remoteName: 'mfe1',
        exposedModule: './Module',
      }).then((m) => {
        return m.MicrofrontendModule;
      }),
  },
  {
    path: 'remote1',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry: 'http://localhost:7000/remoteEntry.js',
        remoteName: 'mfe2',
        exposedModule: './Module1',
      }).then((m) => {
        return m.Microfrontend1Module;
      }),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

и мой HTML-компонент приложения выглядит так

      <ul>
  <li [routerLink]="['/remote']">Product View</li>
  <li [routerLink]="['remote1']">Product Cart</li>
</ul>

<h2>
  Shell App
</h2>

<div class="container">
  <router-outlet></router-outlet>
</div>

Теперь я хочу открыть оба приложения рядом в компоненте приложения. Кто-нибудь, пожалуйста, помогите мне в этом.