Unable to use angular elements with `@defer`

[median quarry]

Hi there!

I'm currently trying to create a custom element via the @angular/elements package. The basic setup works fine but I've stumbled upon a pretty unfortunate stumbling block: The new @defer block does not work an custom element. The problem is that the lazy chunks are always loaded relative to the site that hosts the custom element.

For example:

• Element bundle is served on port 8081
• Demo site is served on port 8082 and includes the element via a script tag (<script src="http://127.0.0.1:8081/main.js"...)

As soon as a @defer block is triggered, the corresponding lazy chunk (e.g., 835.js) is requested via http://127.0.0.1/835.js - this obviously doesn't work, as the chunk is hosted on 8081, next to the main bundle.

Specifying the baseHref option in the angular.json doesn't make a difference.

My question: Is there any way to make this scenario work? Or are lazy-loading and angular elements conceptually incompatible?

[ember knoll]

Yes its a limitation when you use webpack for bundling your application. try esbuild which should be able to resolve your lazy chunk paths with angular custom elements.