Angular Deferred Loading

How it works

The detailed tool panel lives in a separate source file and is only referenced inside the deferred block. A native button supplies the interaction trigger, and a placeholder explains what has not loaded yet. Choose triggers that fit a real user task; deferring essential instructions until an invisible or unreachable trigger would damage accessibility rather than improve performance.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

• package.json
• angular.json
• tsconfig.json
• tsconfig.app.json
• tsconfig.spec.json
• src/index.html
• src/styles.css
• src/app.ts
• src/app.config.ts
• src/main.ts
• src/app.spec.ts
• fixture-server.mjs
• src/heavy-card.ts

Example

import { Component } from '@angular/core';
import { HeavyCard } from './heavy-card';

@Component({
  selector: 'bh-deferred-loading',
  standalone: true,
  imports: [HeavyCard],
  template: `<button #open type="button">Load tool details</button>
    @defer (on interaction(open)) {
      <heavy-card></heavy-card>
    } @placeholder {
      <p data-result>Details not loaded</p>
    }`,
})
export class App {}

Expected result

Details not loaded

The browser begins with the placeholder, then clicking the trigger loads and renders the actual supporting component. The source file and its template are part of the Angular compilation. This test proves behavior for the fixture, not a guaranteed production performance improvement.

Supporting source

import { Component } from '@angular/core';
@Component({
  selector: 'heavy-card',
  standalone: true,
  template: '<p data-result>Tool details loaded</p>',
})
export class HeavyCard {}