1

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,
    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 {}

and my App componet html is looks like

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

Now I want to open both apps side by side in App component. Anyone kindly help me on this.

Josef
  • 2,869
  • 2
  • 22
  • 23
AJS
  • 11
  • 4
  • I think you can solve this easily by using multiple named router outlets. Take a look here: https://stackoverflow.com/questions/34628848/angular2-multiple-router-outlet-in-the-same-template – vanderdill Mar 30 '22 at 07:40
  • @vanderdill yes got it and it is working but I want to use module federated components as html tag or open it within div. – AJS Mar 30 '22 at 09:52
  • i never worked with micro-frontends on angular, but as far I know module federation is not supported natively by angular yet. I've found this example: https://github.com/module-federation/module-federation-examples/tree/master/angular11-microfrontends-ngxs (in case you haven't already saw it) – vanderdill Mar 30 '22 at 10:49

0 Answers0