Different approach to utilize Angular Micro-Frontend remotes in the host Angular app

Question

Context:

I have 2 Angular 13 applications, 1 as remote and the other as host and using Module Federation to configure both remote(creating mfe) and host.

All Module Federation examples directs us to load the remote module in the host like this

 {
    path: 'kpi',
    loadChildren: () =>
      loadRemoteModule({
        remoteEntry:
          'http://localhost:58777/dist/megaHrx/remoteEntry.js',
        remoteName: 'mfe1',
        exposedModule: './KpiModule'
      }).then((m) => m.ChangeKpiModule)
  }

While my remote Module is as following:

@NgModule({
  declarations: [ChangeKpiComponent],
  imports: [CommonModule, ChangeKpiRoutingModule],
  providers: [AbbbbbService , StorageService]
})
export class ChangeKpiModule {}

Question:

This works and my Remote component ChangeKpiComponent gets rendered under the route kpi as expected, but what my intention is to use this ChangeKpiComponent via its selector admin-reporting-change-kpi and not by directly loading it via loadChildren in the Routing module.

Is there a way to do that ? If yes, How ?

Amer · Accepted Answer · 2023-01-06 18:57:01Z

3

I think you can achieve that as follows:

Expose the component itself also from the remote app (not only the module).
Load it in your host app using the loadRemoteModule method.
Create a dynamic component based on the returned type from loadRemoteModule.
You can create a directive to reuse it anywhere in the host app:

@Directive({ selector: '[adHost]' })
export class AdHostDirective {
  constructor(private viewContainerRef: ViewContainerRef) {}

  ngOnInit(): void {
    loadRemoteModule({
      remoteEntry: 'http://localhost:58777/dist/megaHrx/remoteEntry.js',
      remoteName: 'mfe1',
      exposedModule: './KpiComponent', // <<<< Use the component expose
    }).then((m) => {
      const componentType = m.ChangeKpiComponent; // <<<< The component's type here.

      // Create the component in this view-container:
      this.viewContainerRef.createComponent(componentType);
    });
  }
}

answered Jan 6, 2023 at 18:57

Amer

6,7442 gold badges11 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aakash Uniyal Over a year ago

Oh I did not know we could expose components too ! This changes and simplifies soo much for me. Thanks !

Collectives™ on Stack Overflow

Different approach to utilize Angular Micro-Frontend remotes in the host Angular app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related