L'indicateur de désactivation de l'hydratation est appliqué à un nœud invalide

Cette erreur se produit lorsque l'attribut ngSkipHydration a été ajouté à un nœud DOM inapproprié. L'attribut ngSkipHydration ne peut être appliqué qu'aux nœuds host de composants, soit directement dans le template, soit via un host binding. Il ne peut pas être appliqué à d'autres nœuds DOM et, si c'est le cas, n'a aucun effet si ce n'est de provoquer cette erreur.

Vous trouverez plus d'informations sur l'hydratation dans ce guide.

Les exemples suivants déclenchent l'erreur.

Exemple 1

Dans cet exemple, l'attribut ngSkipHydration est appliqué à une <div> via les host bindings d'une directive. Comme la <div> n'est pas un nœud host de composant, Angular lève une erreur.

@Directive({
  selector: '[dir]',
  host: {ngSkipHydration: 'true'},
})
class Dir {}

@Component({
  selector: 'app',
  imports: [Dir],
  template: ` <div dir></div> `,
})
class Simple {}

Exemple 2

Dans cet exemple, ngSkipHydration est appliqué à une <div> en tant qu'attribut via un template. Comme la <div> n'est pas un nœud host de composant, Angular lève une erreur.

@Component({
  selector: 'app',
  template: ` <div ngSkipHydration></div> `,
})
class Simple {}

Déboguer l'erreur

Supprimez l'attribut ngSkipHydration de tous les nœuds DOM invalides. Vous pouvez aussi déplacer l'attribut ngSkipHydration vers le nœud host du composant, dans un template ou via un host binding.