@defer — Lazy Loading in Templates

@defer (on viewport) {
  <!-- alles hier (und seine Abhängigkeiten) landet in einem separaten Chunk -->
  <app-comments [postId]="post().id" />
} @placeholder (minimum 300ms) {
  <!-- wird VOR dem Auslösen des Triggers angezeigt; Pflicht bei on viewport / interaction / hover -->
  <div class="comments-skeleton"></div>
} @loading (after 100ms; minimum 500ms) {
  <!-- wird angezeigt, während der Chunk lädt (after: kein Flackern bei schnellem Laden) -->
  <app-spinner />
} @error {
  <!-- wenn der Chunk-Download fehlschlägt -->
  <p>Wir konnten die Kommentare nicht laden.</p>
}

@defer { ... }                          <!-- Standard: on idle -->
@defer (on idle) { ... }                <!-- requestIdleCallback -->
@defer (on idle(500)) { ... }           <!-- v22: idle, spätestens aber nach 500 ms -->
@defer (on viewport) { ... }            <!-- tritt in den Bildschirm ein (IntersectionObserver) -->
@defer (on viewport({ rootMargin: '200px' })) { ... }   <!-- v21: IntersectionObserver-Optionen -->
@defer (on viewport(trigger)) { ... }   <!-- beobachtet ein anderes Element: <div #trigger> -->
@defer (on interaction) { ... }         <!-- click / keydown auf dem Placeholder -->
@defer (on interaction(btn)) { ... }    <!-- click auf ein bestimmtes Element (#btn) -->
@defer (on hover) { ... }               <!-- mouseenter / focusin -->
@defer (on immediate) { ... }           <!-- direkt nach dem Rendern (aber trotzdem lazy) -->
@defer (on timer(2s)) { ... }           <!-- nach einer Weile -->
@defer (when isOpen()) { ... }          <!-- Bedingung (nur einmal: true → laden) -->
@defer (on viewport; on timer(5s)) { ... }  <!-- mehrere Trigger = ODER -->

<!-- Chunk früh herunterladen, später rendern -->
@defer (on interaction; prefetch on idle) {
  <app-rich-editor />
} @placeholder {
  <button>Bearbeiten</button>
}

<!-- Typisch: prefetch on hover für Aktionen „einen Klick entfernt“ -->
@defer (on interaction; prefetch on hover) {
  <app-share-dialog />
} @placeholder {
  <button>Teilen</button>
}

// Damit ein Block wirklich lazy ist (eigener Chunk), müssen seine Abhängigkeiten:
//  1. Standalone sein (jetzt der Standard)
//  2. NUR in @defer-Blöcken dieses Templates verwendet werden
//  3. in derselben Datei nicht auf andere Weise eingebunden sein (z. B. im TS-Code referenziert, ViewChild usw.)

@Component({
  imports: [CommentsWidget, HeavyChart], // ok: sie erscheinen nur in @defer
  template: `
    @defer (on viewport) { <app-heavy-chart /> }
  `,
})
export class Dashboard {
  // ✗ damit wäre HeavyChart „eager“ — es wird direkt in der Klasse referenziert:
  // chart = viewChild(HeavyChart);
}

<!-- SSR: Incremental Hydration — Standard seit v22 (withIncrementalHydration ist nicht mehr nötig) -->
@defer (hydrate on viewport) {
  <app-product-reviews />   <!-- das HTML kommt fertig gerendert vom Server, das JS wird geladen, sobald es sichtbar ist -->
}

@defer (hydrate on interaction) { <app-filters /> }
@defer (hydrate never) { <app-static-footer /> }   <!-- nur HTML, kein JS -->

// v22: Du kannst anpassen, was „idle“ für @defer und onIdle (injectAsync) bedeutet
import { provideIdleServiceWith } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIdleServiceWith(MyIdleService), // z. B. eine Implementierung, die auch auf das Laden der Schriften wartet
  ],
};