Issue
Angular recents announced v17 of Angular, that will have a new solution for lazy loading components, called Deferred Loading.
What is the advantages of use defer
instead of *ngIf
?
Deferred Loading:
{#defer when condition}
<app-my-component />
{/defer}
*ngIf:
<app-my-component *ngIf="condition"> </app-my-acomponent>
Solution
The new feature is called Deferrable views.
A deferrable view is wrapped in a @defer{}
block.
This allows the angular compiler to transform the static import of the component into a dynamic import. By doing this you bundler will be able to lazy-load the component wrapped by the @defer
block.
There are 2 main differences with ngIf
or the @if
block :
NgIf
/@if
doesn't lazy-load.- A deferrable view cannot be reverted. I won't allow you to toggle a component depending on boolean like the if block does. If you want that behaviour you'll have to wrap the
@defer
with an@if
.
You'll have move info on the new docs !
Answered By - Matthieu Riegler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.