Lazy load Angular components

Lazy load Angular components with Ivy and Angular 9

Lazy loading components in Angular? 🤔 You mean lazy loading modules with the Angular router!

No, you read correctly, lazy loading components!

Yes, the current Angular version only supports lazy loading of modules. But Ivy offers us new possibilities.

Lazy loading so far — Lazy loaded routes

Lazy loading is a great feature. In Angular, we get it almost for free by declaring a lazy route.

The code above would generate a separate chunk for the customers.module which gets loaded as soon as we hit the customer-list route.

It’s a pretty lovely way to shrink the size of your main bundle and boost the initial load of your application.

Still, wouldn’t it be cool if we get even more granular control over lazy loading? For example, by lazy loading single components?

Lazy loading of single components hasn’t been possible so far. But, things have changed with Ivy.

Find out more