Total guide to lazy loading with Angular @defer

Tomas Trajan
15 min readNov 14, 2023

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

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer