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