Nœud de référence d'insertion introuvable

Angular a levé cette erreur parce qu'il a tenté d'insérer un nœud DOM à côté d'un autre nœud qu'il suivait, et que ce nœud ne se trouve plus là où Angular s'attend à le trouver.

Angular garde la trace des nœuds DOM qu'il rend afin de savoir plus tard où insérer, déplacer ou supprimer des éléments, par exemple lorsqu'un bloc @for est rendu à nouveau. Si quelque chose en dehors d'Angular modifie cette partie du DOM (supprime un nœud, le déplace ailleurs), l'état interne d'Angular devient obsolète. La prochaine fois qu'il tente d'insérer à côté de ce nœud, vous obtenez cette erreur au lieu d'une NotFoundError native peu explicite.

Cela peut se produire à cause de :

• Du code applicatif qui manipule directement le DOM (ElementRef.nativeElement, document.querySelector, innerHTML, etc.) au lieu de passer par Angular.
• Une extension de navigateur qui modifie la page, comme un outil de traduction, un correcteur grammatical ou un gestionnaire de mots de passe.
• Un cas limite dans Angular lui-même, dans du code qui réordonne ou rend conditionnellement des vues (@for, @if, vues créées dynamiquement).

L'exemple suivant déclenche l'erreur :

@Component({
  selector: 'app-example',
  template: `@if (show) {
    <span>{{ text }}</span>
  }`,
})
export class Example {
  show = true;
  text = 'hello';
  hostElement = inject(ElementRef).nativeElement;

  ngAfterViewInit() {
    // Removing this node behind Angular's back is what causes the error.
    this.hostElement.querySelector('span').remove();
  }
}

Déboguer l'erreur

Le message d'erreur indique quel nœud Angular s'attendait à trouver : commencez par là.

• Cherchez dans ce composant (ou dans un parent) du code qui manipule directement le DOM au lieu d'utiliser les API d'Angular, et remplacez-le par ces API.
• Si l'erreur n'apparaît que chez certains utilisateurs, ou si vous pouvez la reproduire localement avec une extension installée, essayez une fenêtre de navigation privée avec les extensions désactivées.
• Si elle se produit systématiquement sur la même route pour de nombreux utilisateurs différents, il ne s'agit probablement pas d'une extension (elles varient d'un utilisateur à l'autre) : cherchez plutôt quelque chose de déterministe dans cette page, comme un @for/@if qui réordonne ou supprime du contenu de manière inhabituelle, ou un widget tiers intégré à cette page.
• Si rien de ce qui précède ne l'explique, ouvrez une issue avec une reproduction.