blog/angular-defer-lazy-loading-total-guide

[giscus[bot]]

blog/angular-defer-lazy-loading-total-guide

Learn everything about the lazy loading of standalone components with Angular @defer block including best practices, deep dive on all interactions and gotchas including a live demo!

https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide

[chandramuralis]

What will be the user experience when we add lazy loading to Angular application, while the user is on the page if we push new version of the application. The Angular application will try to lazy load a component, but server will not have that file anymore because we published new version.
I know we can handle the loading error and show some error page, but the UX will be bad in this flow I believe. Is there any better practice to handle this?

[tomastrajan]

Hey there @chandramuralis!

This problem is not exclusive to lazy loading of Angular standalone components with @defer as the same problem is happening since the inception of lazy loading with routing / lazy NgModules.

The solutions to this problem lies more in the infrastructure, eg,= don't delete previous files on new deployment, or something like polling / websocket to notify user about new deployment and prompt application reload.

Hope that helps! Cheers☺️

[chandramuralis]

@tomastrajan, Sorry for the confusion. I didn't mean to say that this is problem with new @defer, this is my concern with choosing lazy loaded modules.

[JarekKos]

What about passing input values and handling events coming from lazy loaded component?

[tomastrajan]

Good point, it just works!

eg in one of my projects I use

@defer (when dashboardItem.type === DASHBOARD_ITEM_TYPE.VERSIONS; prefetch on idle) {
    <ob-dashboard-item-version [dashboardItem]="dashboardItem" [results]="results" />
}

no event here but would work if the @Input() works 😉

[johanndev]

Great article!

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 that is hosted under a different origin. The problem is that the lazy chunks are always loaded relative to the origin 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.

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

[tomastrajan]

Hey @johanndev!

Interesting, I have not tried this yet and Inam positively surprised that it even works that far that it knows the correct chunk!

When we did Angular elements, we usually used something like ngx-build-plus to produce a single bundle of element with everything included.

Now fkr the solution, coincidentally, in the past I have created an open source library which can lazy load Angular elements or any other web components in the Angular apps.

Check out https://angular-extensions.github.io/elements

[johanndev]

Hey @tomasatrajan,

Thanks for your reply. I already tried using ngx-build-plus - the singleBundle option does not bundle lazy chunks, these always stay separate.

Your library looks really convenient, unfortunately it doesn't help me with my scenario - the custom element should be able to be embedded in a plain HTML site, not in an angular application.

[johanndev]

A user in the angular discord gave me the hint to try the browser-esbuild builder - and it just works! 🎉
Consequently, using the new application builder also works :)

[tomastrajan]

Hey @johanndev, happy to hear that you find the solution and also that you share it here with the rest of the folks! 💪

[mieschkoDev]

Hello.
Is there any way to force prefetch onIdle HeavyComponent if condition is false ?
@if(condition) {
@defer {
app-heavy-component
}
} @else {
app-light-component
}