Bu hata, hidrasyon işlemi sırasında Angular'ın sunucu tarafı oluşturma sırasında oluşturulmuş ve anotasyonlanmış bir DOM yapısı beklediği ancak istemcide DOM ağacının sunucu tarafında oluşturulan DOM ağacından farklı olduğu anlamına gelir.
Bu hata genellikle Angular'ın ürettiğinin dışında DOM yapısını değiştiren yerel tarayıcı API'lerini kullanarak doğrudan DOM manipülasyonu nedeniyle oluşur. Ayrıca HTML içeriğini ayarlamak için innerHTML veya outerHTML kullanırsanız da oluşur; bu da benzer şekilde Angular'ın ürettiğinin dışında DOM yapısını değiştirir. Bunu, bileşeni yerel API'ler yerine yerel Angular API'lerini kullanacak şekilde yeniden düzenleyerek çözebilirsiniz. Bu mümkün değilse, bileşeninizin ana düğümüne ngSkipHydration özniteliğini ekleyebilirsiniz; bu, bileşen ve alt bileşenleri için hidrasyonu devre dışı bırakacaktır. ngSkipHydration yalnızca son çare olarak kullanılmalı ve düzeltilmesi gereken bir hata olarak değerlendirilmelidir.
Hidrasyon hakkında daha fazla bilgiyi bu kılavuzda bulabilirsiniz.
Aşağıdaki örnek hatayı tetikleyecektir.
@Component({
selector: 'app-example',
template: '<div><span>world</span></div>',
})
export class Example {
hostElement = inject(ElementRef).nativeElement;
ngOnInit() {
// İçinde `Hello` metni olan yeni bir <p> öğesi oluştur
const newNode = document.createElement('p');
newNode.innerHTML = 'Hello';
// <p>'yi ilk öğeden önce ekle. Angular <p> öğesi hakkında bilgiye sahip olmadığından,
// ilk öğe konumunda <div> öğesini arayacaktır. Sonuç olarak, bir hidrasyon uyumsuzluğu
// hatası fırlatılacaktır. Bunun yerine, <p> öğesini oluşturmak için bileşenin şablonunu güncelleyin.
this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
}
}Hatayı ayıklama
Geliştirici konsolundaki hata mesajı, soruna neden olan uygulamanın DOM yapısının belirli bir bölümü hakkında bilgi içermelidir. Doğrudan yerel API'ler kullanarak DOM manipülasyonu gibi hidrasyonla ilgili hatalar için uygulamanın o bölümünü inceleyin.
Şablonunuzun geçerli bir HTML yapısına sahip olduğunu kontrol edin. Daha fazla bilgiyi hidrasyon kılavuzunda bulabilirsiniz.
Olası bir geçici çözüm olarak bileşeninizin ana düğümüne ngSkipHydration özniteliğini ekleyebilirsiniz.
Uygulamanız geliştirme ortamında çalışıyorsa ancak üretim derlemelerinde hidrasyon hataları görüyorsanız, tarayıcıya teslim edilen oluşturulmuş HTML'nin sunucuda oluşturma sırasında Angular tarafından üretilen yorum düğümlerini içerdiğinden emin olun. Bu yorum düğümleri, Angular çalışma zamanı tarafından görünüm kapsayıcıları (hidrasyonlu ve hidrasyonsuz) için çapa noktaları olarak ve hidrasyon sürecinin orijinal konumlarında bulunmalarını beklediği yerlerde kullanılır. HTML'den yorum düğümlerini kaldıran özel bir mantığınız varsa veya CDN'nizi içeriği sunmadan önce bunları kaldıracak şekilde yapılandırdıysanız, yorum düğümü kaldırma işlemini devre dışı bırakın ve hidrasyon hatalarının gidip gitmediğini kontrol edin.