diff --git a/.gitignore b/.gitignore index b54b45a1..db4a4877 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ testem.log Thumbs.db .angular +.vs/module-federation-plugin/v17/.wsuo diff --git a/libs/mf-tools/README.md b/libs/mf-tools/README.md index d13c1657..34395562 100644 --- a/libs/mf-tools/README.md +++ b/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). diff --git a/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts b/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts index bbe1261d..05123158 100644 --- a/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts +++ b/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 = 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); } } }