Deferrable views in Angular

Today we’re going to explore a new feature in Angular 17 — deferrable views.

Angular 17 is game changer, and when we talk about bumping current projects to version 17 — using all new features and benefits you can quickly see that it will require a lot of refactoring, including both templates and components (deferrable views, signals, new control-flow syntax etc.)

And one of the Angular 17 features is deferrable views.

Deferrable views will help you reduce your bundle size and improve your user experience.

So, we’re going to discuss how to use deferrable views and how to use them.

Let’s get started.

Lazy Loading Before Angular 17

Before the deferrable option in Angular 17 we had a few different ways to reduce the initial bundle size of an Angular app.

The most common way was the router-based lazy loading.

When defining routes you could use a simple notation which instructions Angular that a specific chunk of your application could be loaded only when it was activated via the router.

This was often referred to as lazy-loading pieces of your Angular app. And looked like this.

const routes: Routes = [
  {
    path: 'items'…