Lab 19: Deferrable Views

📖 Ressources

• Documentation Deferrable Views
• Guide Angular @defer

🚀 Code de départ

step-18-album-wholesale-v21-post-signal-form

Dans ce lab, vous allez implémenter le chargement différé pour les composants en utilisant les blocs @defer d’Angular. Vous convertirez le rendu conditionnel avec @if pour utiliser @defer avec des déclencheurs d’interaction, ajouterez des états de chargement et de placeholder, et optimiserez la taille du bundle en séparant les composants lourds.

📝 Instructions

Étape 1: Remplacer @if par @defer

Convertissez le composant des commentaires du rendu conditionnel au chargement différé.

Avant (step-18):

@if (showComments()) {
  <app-comments [albumId]="data.album.id"></app-comments>
}
@else {
  <a class="primary" (click)="showComments.set(true)">Charger les commentaires</a>
}

Après (step-19):

@defer (on interaction) {
  <app-comments [albumId]="data.album.id"></app-comments>
} @placeholder {
  <a class="primary">Charger les commentaires</a>
} @loading {
  <p>Chargement des commentaires…</p>
} @error {
  <p>Impossible de charger les commentaires.</p>
}

Étape 2: Supprimer le state Signal

Puisque @defer gère l’état, supprimez le signal showComments du composant:

export class DetailComponent {
  // ❌ Supprimez ceci - plus nécessaire
  // showComments = signal(false);

  albumCommentsService = inject(AlbumCommentsService);

  constructor(@Inject(MAT_DIALOG_DATA) public data: {album: Album}) {}
}

Étape 3: Supprimer l’import CdkScrollable

Nettoyez les imports inutilisés du composant:

// Avant
imports: [CdkScrollable, MatDialogContent, ...]

// Après
imports: [MatDialogContent, MatDialogTitle, ...]

Étape 4: Tester le chargement différé

1. Lancez l’application: npm start
2. Ouvrez l’onglet Network des DevTools du navigateur
3. Ouvrez une fenêtre de détail d’album
4. Remarquez que le composant des commentaires n’est PAS chargé initialement
5. Cliquez sur “Charger les commentaires”
6. Observez le chunk lazy chargé dans l’onglet Network

Étape 5: Ajouter un délai de chargement (Optionnel)

Évitez l’affichage flash du chargement sur les connexions rapides:

@defer (on interaction) {
  <app-comments [albumId]="data.album.id"></app-comments>
} @loading (after 200ms; minimum 1s) {
  <p>Chargement des commentaires…</p>
} @placeholder {
  <a class="primary">Charger les commentaires</a>
}

Étape 6: Ajouter le prefetching (Optionnel)

Préchargez le composant quand le navigateur est inactif:

@defer (on interaction; prefetch on idle) {
  <app-comments [albumId]="data.album.id"></app-comments>
} @placeholder {
  <a class="primary">Charger les commentaires</a>
}

✅ Critères de réussite

• Le composant des commentaires utilise @defer (on interaction)
• Les blocs @placeholder, @loading et @error sont implémentés
• Le signal showComments est supprimé
• Les imports inutilisés sont nettoyés
• Le composant se charge en différé uniquement quand l’utilisateur clique
• L’analyse du bundle montre un chunk séparé pour le composant des commentaires

🎯 Différences clés: @if vs @defer

Fonctionnalité	@if	@defer
Bundle	Inclus dans le principal	Chunk séparé
Timing de chargement	À l’initialisation du composant	Au déclenchement
Gestion d’état	Manuelle (signal)	Automatique
États de chargement	Manuelle	Intégrés
Gestion d’erreur	Manuelle	Intégrée (@error)