Estoy usando Angular v14.1.1 y @angular-architects/module-federation v14. Y en MFE que usan Angular elements createCustomElement y lo expone como ./web-component usando @angular-architects/module-federation webpack config. Desde la aplicación MFE, se emite un evento pero no se obtiene cómo agregar un oyente de MFE en la aplicación de shell para escuchar el evento.
por ejemplo
Aplicación MFE
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 }) ); } } }Aplicación de shell
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 { }Por ejemplo, Evento de componente de MFE:
@Output() saveRecord: EventEmitter<any> = new EventEmitter<any>(); MFESaveClick(response){ this.saveRecord.emit(response); }¿Cómo agregar Event Listener en la aplicación Shell para MFES Events?
Por favor, hágamelo saber si se requiere algún otro detalle.
por favor avise.
Gracias.
No estoy seguro de la solución exacta, pero creo que hay una manera de usar los componentes web Input/Output @angular-architects/module-federation-tools como carga directa de un componente web a través de la mención de federación de módulos aquí en los documentos.
En la aplicación de shell, se crea un componente personalizado y se enruta a la ruta mediante las importaciones 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 { } Y luego en CustomerComponent usando el selector WebComponentWrapper .
por ejemplo
<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' }; }Y la aplicación remota puede usar accesorios y eventos como este.
<!--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); }No probado, pero espero que esto ayude.