From 40e2058e079f8e47bce9685e6b08ac5c8d6fd385 Mon Sep 17 00:00:00 2001 From: tomastrajan Date: Mon, 2 Sep 2024 12:16:57 +0200 Subject: [PATCH] fix(lib): rework loadingSuccess and loadingError outputs to inputs (pass in handler) - the outputs don't work on * based structural directives - desugared ng-template based syntax doesn't work for this use case (retrieve tag, ...) --- .../features/examples/basic/basic.component.html | 3 ++- .../app/features/examples/basic/basic.component.ts | 7 +++++++ .../lazy-element-dynamic.directive.ts | 13 +++++++------ .../lazy-element/lazy-element.directive.ts | 14 ++++++++------ 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html index 4eafa5c..53b5459 100644 --- a/projects/elements-demo/src/app/features/examples/basic/basic.component.html +++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.html @@ -92,7 +92,8 @@

'https://unpkg.com/wrong-url.js?module'; loadingTemplate: loading; errorTemplate: error; - module: true + module: true; + loadingError: customLoadingErrorHandler " raised > diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts index 64d8950..171ffd8 100644 --- a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts +++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts @@ -52,6 +52,13 @@ export class BasicComponent { onSliderChange(value: number) { this.xAxis = [-value, value]; } + + customLoadingErrorHandler(error: ErrorEvent) { + console.log( + '[Optional custom loading error handler] Loading failed:', + error, + ); + } } const CODE_EXAMPLE_1 = ` diff --git a/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts index c3c73f6..088da42 100644 --- a/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts +++ b/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts @@ -34,9 +34,10 @@ export class LazyElementDynamicDirective implements OnInit { errorTemplateRef: TemplateRef | null = null; @Input('axLazyElementDynamicModule') isModule = false; // eslint-disable-line @angular-eslint/no-input-rename @Input('axLazyElementDynamicImportMap') importMap = false; // eslint-disable-line @angular-eslint/no-input-rename - - loadingSuccess = output(); - loadingError = output(); + @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void; + @Input('axLazyElementLoadingError') loadingError?: ( + error: ErrorEvent, + ) => void; #viewRef: EmbeddedViewRef | null = null; @@ -98,7 +99,7 @@ export class LazyElementDynamicDirective implements OnInit { ) .subscribe({ next: () => { - this.loadingSuccess.emit(); + this.loadingSuccess?.(); this.#vcr.clear(); const originalCreateElement = this.#renderer.createElement; this.#renderer.createElement = (name: string, namespace: string) => { @@ -112,7 +113,7 @@ export class LazyElementDynamicDirective implements OnInit { this.#cdr.markForCheck(); }, error: (error) => { - this.loadingError.emit(error); + this.loadingError?.(error); const errorComponent = elementConfig.errorComponent || options.errorComponent; this.#vcr.clear(); @@ -122,7 +123,7 @@ export class LazyElementDynamicDirective implements OnInit { } else if (errorComponent) { this.#vcr.createComponent(errorComponent); this.#cdr.markForCheck(); - } else if (ngDevMode) { + } else if (ngDevMode && !this.loadingError) { console.error( `${LOG_PREFIX} - Loading of element <${this.tag}> failed, please provide Loading failed... and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`, error, diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts index 5ba0ec5..3e1ceb0 100644 --- a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts +++ b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts @@ -51,9 +51,10 @@ export class LazyElementDirective implements OnInit, OnChanges { errorTemplateRef: TemplateRef | null = null; @Input('axLazyElementModule') isModule?: boolean; // eslint-disable-line @angular-eslint/no-input-rename @Input('axLazyElementImportMap') importMap = false; // eslint-disable-line @angular-eslint/no-input-rename - - loadingSuccess = output(); - loadingError = output(); + @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void; + @Input('axLazyElementLoadingError') loadingError?: ( + error: ErrorEvent, + ) => void; #viewRef: EmbeddedViewRef | null = null; #url$ = new BehaviorSubject(null); @@ -86,6 +87,7 @@ export class LazyElementDirective implements OnInit, OnChanges { #setupUrlListener(): void { const tpl = this.#template as any; + console.log(tpl); const elementTag = tpl._declarationTContainer ? tpl._declarationTContainer.tagName || tpl._declarationTContainer.value : tpl._def.element.#template.nodes[0].element.name; @@ -120,7 +122,7 @@ export class LazyElementDirective implements OnInit, OnChanges { ), ).pipe( catchError((error) => { - this.loadingError.emit(error); + this.loadingError?.(error); this.#vcr.clear(); const errorComponent = elementConfig.errorComponent || options.errorComponent; @@ -130,7 +132,7 @@ export class LazyElementDirective implements OnInit, OnChanges { } else if (errorComponent) { this.#vcr.createComponent(errorComponent); this.#cdr.markForCheck(); - } else if (ngDevMode) { + } else if (ngDevMode && !this.loadingError) { console.error( `${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide Loading failed... and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`, ); @@ -139,7 +141,7 @@ export class LazyElementDirective implements OnInit, OnChanges { }), ); }), - tap(() => this.loadingSuccess.emit()), + tap(() => this.loadingSuccess?.()), mergeMap(() => customElements.whenDefined(elementTag)), takeUntilDestroyed(this.#destroyRef), )