Boost Angular App Speed Using the Defer Feature

To follow along, ensure you have:

• Node.js v20 installed
• Angular CLI v18.2.19 (or later)

Once Node.js is installed, you can proceed to install Angular CLI.

To install the Angular CLI globally using npm, open a terminal or console window. If you're using Windows, macOS, or Linux, the following command works the same way:

npm install -g @angular/cli
							

This process might take a few moments as the necessary packages are downloaded and installed.

Create a new folder for your project (e.g., TestAngularDefer ) and navigate into it. Open a terminal and execute the following command to scaffold a new Angular project:

ng new TestAngularDefer
							

After setting up your Angular application, the next steps involve organizing components and routes effectively to lay the groundwork for leveraging Angular's defer capabilities. This section walks you through setting up a clean layout and modular structure.

By default, Angular includes sample HTML in the AppComponent. To prepare for a routed layout:

1. Open app.component.ts.
2. Replace the existing template code with the following:

<router-outlet></router-outlet>
							

This enables Angular’s router to display components based on the current route.

Use Angular CLI commands to scaffold the necessary components. Open a terminal in your project directory and run the following:

ng new TestAngularDefer
Run ‘ng g c layout’
Run ‘ng g c layout/header’
Run ‘ng g c layout/footer’
Run ‘nx g c components/home’
Run ‘nx g c components/about’
Run ‘nx g c components/services’
Run ‘nx g c components/spinner’
						

These components will be used to structure your application pages and layout.

In layout.component.ts, import the necessary components and Angular's RouterOutlet:

import { Component } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [HeaderComponent, FooterComponent, RouterOutlet],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.css'
})
export class LayoutComponent {}
							

Now, update layout.component.html to define the layout structure:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

This wraps your routed views with a consistent header and footer layout.

Update your app.routes.ts file to define application routes. This includes a default redirect and a nested route under the layout component:

export const routes: Routes = [
    {path:'', redirectTo: '/home', pathMatch:"full"},
    {path:'', component:LayoutComponent, children:[
        {path:'home', component: HomeComponent }
    ]}
];

To give the home page meaningful structure, include the About and Services components in home.component.html:

<app-about></app-about>
<app-services></app-services>

Add the following styles to styles.css to provide consistent layout and visual separation for each section:

*{
box-sizing: border-box;
}
.box{
    border:2px solid black;
    padding: 30px ;
    vertical-align: middle;
    text-align: center;
    color: black;
    text-shadow: 1px 1px 3px 4px white;
    font-size: x-large;
    font-weight: 900;
}

Within each component’s HTML (header, footer, about, services), add a div element with styling classes:

<div class="box header">
    Header
</div>

In the component’s corresponding CSS (e.g., header.component.css), define the .header class:

.header{
    background-color: #2b6777;
    height: 150px;
}

Repeat similar styling patterns for the other sections like footer, about, and services to maintain design consistency. It show as below

Angular's @defer syntax introduces a powerful way to load components conditionally only when they are truly needed. This reduces the size of the initial bundle, speeds up load time, and improves overall application performance.

How @defer Works

You can defer the loading of a component until a specific condition is met such as scrolling, interaction, or visibility in the viewport. Here’s how it looks in practice:

<app-about>/app-about
@defer{
<app-service></app-service>  
}

This tells Angular to package the component into a separate JavaScript bundle, loaded only when needed. You'll notice a separate chunk in the build output representing this deferred content.

Angular also allows you to show a placeholder while the deferred component is being loaded. Update your layout.component.html as follows:

<app-header></app-header>
<router-outlet></router-outlet>
@defer{
<app-footer></app-footer>
} @placeholder {
  <div class="box">Loading...</div> }

The loading panel looks like this.

You can enhance user experience by setting a minimum duration for the placeholder to ensure smoother transitions:

@defer{
<app-footer></app-footer>
} @placeholder (minimum 4s) {
  <div class="box">Loading...</div> }

Step 13: @defer with a Loading Spinner

Angular’s @loading block allows you to show content as soon as the deferred bundle begins loading. Here's how to implement it using a custom SpinnerComponent.

HTML for Spinner

<div class="spinner-box">
    <div class="spinner"></div>
</div>

CSS for Spinner

.spinner-box{
    width: 100%;
    height: 100%;
	padding: 40px;
}


.spinner{
    height: 30px;
    width: 30px;
    border-top: 3px solid grey;
    border-radius: 50%;
    animation-name: round;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    margin: auto auto;
}
@keyframes round{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

Usage in layout.component.html

@defer{
<app-footer></app-footer>
} @loading {
  <app-spinner></app-spinner>
}

You can also add a minimum duration:

@defer{
<app-footer></app-footer>
} @loading (minimum 2s) {
  <app-spinner></app-spinner>
}

Output looks as below:

Step 14: Handling Errors with @defer

@defer{
<app-footer></app-footer>
} @error {
  <div class="box">Error Occurred...</div>
}

Step 15: Triggering @defer Load with Conditions

@defer{
<app-footer></app-footer>
}

@defer (on viewport){ 
<app-footer></app-footer>}

@defer (on interaction){
<app-footer></app-footer>}

@defer (on hover){
<app-footer></app-footer>}

@defer (on immediate){
<app-footer></app-footer>}

@defer (on timer(500ms)){
<app-footer></app-footer>}

Step 16: Measuring the Performance Gains

Conclusion