Angular Academy · Leçon

Désabonnement et fuites mémoire

Évitez les fuites avec takeUntilDestroyed.

Désabonnement et fuites mémoire est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Le problème des fuites mémoire

Si vous vous abonnez à un observable de longue durée dans un composant sans jamais vous désabonner, le rappel continue de s’exécuter après la destruction du composant. Cela provoque une fuite mémoire et peut entraîner des erreurs ou un travail en double.

Désabonnement manuel

La correction de base consiste à conserver le Subscription et à vous désabonner dans ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Gérer plusieurs abonnements

Un seul Subscription peut regrouper des abonnements enfants avec .add() ; un unique appel à unsubscribe() les arrête tous.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular fournit takeUntilDestroyed(), qui termine automatiquement le flux lorsque le composant est détruit : aucun ngOnDestroy manuel n’est nécessaire.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Condition requise pour le contexte d’injection

Appelé sans argument, takeUntilDestroyed() doit s’exécuter dans un contexte d’injection (comme le constructeur). En dehors de ce contexte, transmettez explicitement un DestroyRef.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

Le modèle takeUntil (classique)

Avant takeUntilDestroyed, le modèle standard utilisait un Subject qui émettait dans ngOnDestroy.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Les flux qui se terminent ne nécessitent aucun nettoyage

Les requêtes HttpClient émettent une fois, puis se terminent : elles se nettoient donc seules. Vous n’avez généralement pas besoin de vous désabonner d’un appel HTTP unique, même si takeUntilDestroyed reste sans danger.

Le tuyau async s’en charge pour vous

Pour les modèles, la meilleure approche consiste à laisser le tuyau async s’abonner et se désabonner automatiquement. Nous l’étudierons dans la prochaine leçon.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Signes d’une fuite d’abonnement

Des requêtes réseau en double, des gestionnaires qui se déclenchent après une navigation, une mémoire qui augmente dans les outils de développement ou des erreurs « Cannot read property of destroyed view » indiquent souvent des désabonnements oubliés.

toSignal effectue aussi le nettoyage automatiquement

La conversion d’un observable en signal avec toSignal() entraîne également un désabonnement automatique lorsque le contexte propriétaire est détruit.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Choisir une approche

Dans les modèles, privilégiez le tuyau async ou toSignal ; utilisez takeUntilDestroyed() pour les abonnements manuels ; ne recourez à une collection de Subscription qu’en cas de nécessité.

Vérification rapide

Vérifiez votre compréhension du désabonnement.

Récapitulatif : désabonnements et fuites mémoire

Arrêtez toujours les abonnements de longue durée.

takeUntilDestroyed() termine automatiquement le flux lors de la destruction.
Le tuyau async et toSignal() gèrent les abonnements pour vous.
Les appels HTTP uniques se terminent automatiquement.

Ensuite : le tuyau async en détail.

Questions Fréquemment Posées

La leçon « Désabonnement et fuites mémoire » est-elle gratuite ?

Oui — le texte complet de « Désabonnement et fuites mémoire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Désabonnement et fuites mémoire » ?

Évitez les fuites avec takeUntilDestroyed. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Désabonnement et fuites mémoire » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy