Sitemap

Total guide to lazy loading with Angular @defer

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)!

Press enter or click to view image in full size
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
Tomas Trajan

Written by Tomas Trajan

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

Responses (2)