When using a bad element name, the loading indicator is shown indefinitely instead of the error indicator

[lbilger]

I have created an example at https://stackblitz.com/edit/angular-extensions-elements-loading?file=src/app/app.component.html

If the element I am trying to reference is not included in the specified URL, I would expect an error message (as I get when the URL itself is bad), but I get the loading indicator.

[arturovt]

Hey @lbilger . I see there's error template has been created and not the loading one:

Could you tell me if I'm missing anythig?

[lbilger]

Hi @arturovt, thanks for having a look! I had tried this only in Safari, but now that you said it works for you, I noticed that it works in Chrome but not in Safari.

[arturovt]

Ok, need to find my Mac to try it out in Safari 😄 Will get back to you with info soon!

[tomastrajan]

@lbilger library, did NOT work with Stackblitz in the past much because of their service worker setup, did that change?

[lbilger]

I saw no other problems and it seems to work in Chrome, but of course it’s a very minimal example. I noticed the problem in my real application, though. Stackblitz seemed the simplest way to create an example to reproduce it.

[finnMasurat]

Hello,
the issue still seems to be open.
It looks like the code is waiting for the whenDefined function to return the existing element. (

elements/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

Line 88 in 5b5668b

.pipe(mergeMap(() => customElements.whenDefined(tag)))

)

As this function itself is not throwing an error or has a timeout included, the code gets stuck there.