The Complete Production SOP: How to Deploy and Run Angular 18 Deferrable Views (@defer) & Lazy Blocks in Autonomous AI Agents

---
name: "angular-18-deferrable-views"
description: "Declaratively defer and lazy-load heavy Angular component templates using @defer syntax."
metadata:
  author: "Google"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use @defer angular 18"
  - "@defer on viewport angular"
  - "@placeholder @loading angular"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Angular 18 Deferrable Views SOP
1. Ensure deferred child components are standalone (standalone: true).
2. Wrap target with @defer (on viewport; prefetch on idle).
3. Add @placeholder (minimum 300ms) with matching aspect-ratio skeleton.
4. Add @loading (after 100ms; minimum 500ms) to prevent flicker.
5. Add @error block with actionable retry trigger.

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-heavy-chart',
  standalone: true,
  imports: [CommonModule],
  template: `<div class="chart-container">Chart Visualizer Rendered</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeavyChartComponent {}

@defer (on viewport; prefetch on idle) {
  <app-heavy-chart [dataset]="chartData()" />
} @placeholder (minimum 300ms) {
  <div class="h-64 w-full bg-slate-100 dark:bg-slate-800 animate-pulse rounded-lg flex items-center justify-center">
    <span class="text-xs text-slate-400">Chart container queued for viewport...</span>
  </div>
} @loading (after 150ms; minimum 500ms) {
  <div class="h-64 w-full flex items-center justify-center bg-slate-50 dark:bg-slate-900 border border-slate-200 rounded-lg">
    <app-spinner />
  </div>
} @error {
  <div class="h-64 w-full flex flex-col items-center justify-center bg-red-50 dark:bg-red-950/20 rounded-lg text-red-600">
    <p class="text-sm font-semibold">Failed to initialize telemetry charting chunk.</p>
  </div>
}