Hidrasyon atlama bayrağı geçersiz bir düğüme uygulandı

Bu hata, ngSkipHydration özniteliğinin uygunsuz bir DOM düğümüne eklendiğinde oluşur. ngSkipHydration özniteliği yalnızca bileşen ana düğümlerine doğrudan şablonda veya bir host binding aracılığıyla uygulanabilir. Diğer DOM düğümlerine uygulanamaz ve uygulanırsa bu hataya neden olmaktan başka bir etkisi olmayacaktır.

Hidrasyon hakkında daha fazla bilgiyi bu kılavuzda bulabilirsiniz.

Aşağıdaki örnekler hatayı tetikleyecektir.

Örnek 1

Bu örnekte, ngSkipHydration özniteliği bir direktifin host binding'leri kullanılarak bir <div> öğesine uygulanmıştır. <div> bir bileşen ana düğümü olarak davranmadığından, Angular bir hata fırlatacaktır.

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

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

Örnek 2

Bu örnekte, ngSkipHydration şablon aracılığıyla bir öznitelik olarak bir <div> öğesine uygulanmıştır. <div> bir bileşen ana düğümü olarak davranmadığından, Angular bir hata fırlatacaktır.

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

Hatayı ayıklama

ngSkipHydration özniteliğini geçersiz DOM düğümlerinden kaldırın. Alternatif olarak, ngSkipHydration özniteliğini şablonda veya bir host binding aracılığıyla bileşen ana düğümüne taşıyın.