angularlazy-loadingdeferred-loading

Angular Deferrable Views not working as expected when load the defer component in the browser network


I was trying the @defer decorator to lazy load a specific component called app-box-five . Below is a screenshot of my code: enter image description here @defer (on timer(5s)) { }

After waiting 5 seconds, I checked the network tab in the browser and noticed that app.component.ts was lazy-loaded instead of box-five.component.ts.

I expected that only box-five.component.ts would be lazy-loaded, as shown in the screenshot:

enter image description here

please could you explain why this behavior happened ?


Solution

  • On your screen you're highlighting the initiator of the chunk download (so the parent component).

    Check the content of the chunk itself, and you'll see that yout component box-five is correctly lazy-loaded.