Fix for Issue 307 Exposed Error through an Event Emitter

.gitignore

@@ -40,3 +40,4 @@ testem.log
 Thumbs.db
 
 .angular
+.vs/module-federation-plugin/v17/.wsuo

libs/mf-tools/README.md

@@ -269,6 +269,8 @@ Some optional flags are offered to provide options for custom behavior of the `b
   - Those versions introduced new features on how to share the Platform in the window object.
   - This allows to use the `bootstrap()` function even in such cases, where the same version is packed into different micro frontend bundles.
 
+The `WebComponentWrapper` component exposes the `onError` Output which is emitted if there is an error during loading of remote element into DOM
+
 ## More about the underlying ideas
 
 Please find more information on the underlying ideas in this [blog article](https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly).

libs/mf-tools/src/lib/web-components/web-component-wrapper.ts

@@ -5,6 +5,8 @@ import {
   Input,
   OnChanges,
   ViewChild,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import {
@@ -26,6 +28,8 @@ export class WebComponentWrapper implements AfterContentInit, OnChanges {
   @ViewChild('vc', { read: ElementRef, static: true })
   vc: ElementRef;
 
+  @Output() onError: EventEmitter<unknown> = new EventEmitter();
+
   @Input() options: WebComponentWrapperOptions;
   @Input() props: { [prop: string]: unknown };
   @Input() events: { [event: string]: (event: Event) => void };
@@ -66,6 +70,7 @@ export class WebComponentWrapper implements AfterContentInit, OnChanges {
       this.vc.nativeElement.appendChild(this.element);
     } catch (error) {
       console.error(error);
+      this.onError.emit(error);
     }
   }
 }