Total guide to lazy loading with Angular @defer

Let’s 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!

✏️ prompts & design by Tomas Trajan / 🤖 gen by DALL-E

What’s the best way to procrastinate preparing of a Angular Signals talk for the upcoming Angular Zurich Meetup? (make sure to join us if you’re form the region😉)

Crushing enemies as a paladin in Baldur’s Gate 3 is definitely a strong contender but taking a deep dive on the new Angular @defer sounds even better, so let’s go!

Angular 17 is here and it has arrived with a very strong line up of amazing goodies!

The new @defer block, which allows us to lazy load Angular standalone components, is by far the most exciting and impactful feature of Angular 17 (at least in my books)!

Angular @defer lazy loading a “chart” component (placeholder -> loading -> component)

💡 With @defer being released, I would like to point out that the Angular standalone components are now objectively better solution for every possible use-case in Angular applications.

Previously I was on the fence about the trade-off between their usefulness and the necessary efforts, especially for implementing (and migrating) of components in the lazy loaded feature modules in existing applications!

Migrating all your components to standalone makes them “ @defer ready ” which is great because it will become trivial to lazy load them once they grow to a meaningful size!

The Angular @defer at glance

The @defer syntax allows us to lazy load any Angular standalone component with exceptionally great DX and API which covers almost every use case that you can imagine!

As with every new thing, we have to develop new mental models to learn how to use @defer correctly and efficiently

🏺 Quick historical recap; Angular had APIs that allowed us to lazy load components already back in the days of Angular 5, but the APIs were…