Module-Federation: How to addEventListener in Shell app for MFEs App Angular element web components

Question

I am using Angular v14.1.1 and @angular-architects/module-federation v14. And In MFEs using Angular elements createCustomElement and exposes as ./web-component using @angular-architects/module-federation webpack config. From MFEs app emit event but not getting how to add MFEs listener in shell application to listen event.

for example

MFEs App

App.module.ts

export class AppModule implements DoBootstrap
{
  constructor(private injector: Injector) { }
  ngDoBootstrap(): void {
    if (!customElements.get('angular14-customer')) {
      customElements.define(
        'angular14-customer',
        createCustomElement(MFEComponent, { injector: this.injector })
      );
    }
  }
 }

Shell App

AppRoutingModule ts

import { WebComponentWrapper, WebComponentWrapperOptions } from '@angular-architects/module-federation-tools';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [ 
{
  path: 'angular14',
  component: WebComponentWrapper,
  data: {
    type:'module',
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './web-components',
    elementName: 'angular14-customer'
  } as WebComponentWrapperOptions
}];

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

For example MFEs Component Event:

@Output() saveRecord: EventEmitter<any> = new EventEmitter<any>();

MFESaveClick(response){
 this.saveRecord.emit(response);
}

How to add Event Listener in Shell app for MFES Events?

Please let me know if any other detail required.

please advise.

Thanks.

Answer 1

Not sure about exact solution but I think there is way using web-components Input/Output @angular-architects/module-federation-tools as Directly Loading a Web Component via Module Federation menintion here in docs.

In shell app creating custom component and route to path by imports ModuleFederationToolsModule.

const routes: Routes = [
  {
     path:'angular14',
     component: CustomerComponent  
  },
  {
    path:'**',component:NotFoundComponent
  }
  ];
@NgModule({
  declarations: [
    AppComponent,
    CustomerComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
   RouterModule.forRoot(routes),
    ModuleFederationToolsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[]
})
export class AppModule { }

And then in CustomerComponent using WebComponentWrapper selector.

for example

<mft-wc-wrapper [options]="options" [props]="props" [events]="events"></mft-wc-wrapper>

import { WebComponentWrapper, WebComponentWrapperOptions } from '@angular-architects/module-federation-tools';
import { Component } from '@angular/core';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent {
  title = 'CustomerComponent';
  props = {
    "message": "Hello from Shell"
}

events = {
    "saveRecord": (event:any) => {
        console.debug('saveRecord!', event);
    }
}
  options: WebComponentWrapperOptions = {
    type:'module',
    remoteEntry: 'http://localhost:4201/remoteEntry.js',
    exposedModule: './web-components',
    elementName: 'angular14-customer'
  };
}

And remote app you can use props and events something like this.

<!--MFEComponent-->
remote app!
<button (click)="MFESaveClick($event)">click me !</button>

//MFEComponent
 
  @Output() saveRecord: EventEmitter<any>
  = new EventEmitter<any>();

  @Input() message:any;
   

  MFESaveClick(response){
 this.saveRecord.emit(response);
 }

Not tested, but hope this will help.