Angular bu hatayı, izlediği başka bir düğümün yanına bir DOM düğümü eklemeye çalıştığı, ancak o düğüm artık Angular'ın beklediği yerde olmadığı için fırlattı.
Angular, render ettiği DOM düğümlerini takip eder; böylece daha sonra (örneğin bir @for bloğu yeniden render edildiğinde) öğeleri nereye ekleyeceğini, taşıyacağını veya kaldıracağını bilir. Angular dışındaki bir şey DOM'un o bölümünü değiştirirse (bir düğümü kaldırır veya başka bir yere taşırsa), Angular'ın dahili kaydı güncelliğini yitirir. Angular o düğümün yanına bir sonraki ekleme girişiminde, kafa karıştırıcı yerel bir NotFoundError yerine bu hatayı alırsınız.
Bunun nedenleri şunlar olabilir:
- Uygulama kodunun Angular üzerinden gitmek yerine DOM'a doğrudan dokunması (
ElementRef.nativeElement,document.querySelector,innerHTMLvb.). - Sayfaya müdahale eden bir tarayıcı eklentisi; örneğin bir çeviri aracı, dilbilgisi denetleyicisi veya parola yöneticisi.
- Görünümleri yeniden sıralayan veya koşullu olarak render eden kodda (
@for,@if, dinamik olarak oluşturulan görünümler) Angular'ın kendisindeki bir uç durum.
Aşağıdaki örnek bu hatayı tetikler:
@Component({
selector: 'app-example',
template: `@if (show) {
<span>{{ text }}</span>
}`,
})
export class Example {
show = true;
text = 'hello';
hostElement = inject(ElementRef).nativeElement;
ngAfterViewInit() {
// Bu düğümü Angular'dan habersiz kaldırmak hataya neden olur.
this.hostElement.querySelector('span').remove();
}
}Hatayı ayıklama
Hata mesajı, Angular'ın hangi düğümü bulmayı beklediğini söyler; bu yüzden oradan başlayın.
- Bu bileşende (veya bir üst bileşende) Angular API'lerini kullanmak yerine DOM'a doğrudan dokunan kodu arayın ve bunun yerine bu API'leri kullanacak şekilde değiştirin.
- Hata yalnızca bazı kullanıcılarda ortaya çıkıyorsa veya bir eklenti yüklüyken yerel olarak yeniden üretebiliyorsanız, eklentilerin kapalı olduğu bir gizli pencere deneyin.
- Hata aynı rotada birçok farklı kullanıcı için tutarlı şekilde oluşuyorsa, büyük olasılıkla bir eklenti değildir (eklentiler kullanıcıdan kullanıcıya değişir); bunun yerine o sayfada deterministik bir şey arayın, örneğin içeriği alışılmadık bir şekilde yeniden sıralayan veya kaldıran bir
@for/@ifya da o sayfaya gömülü üçüncü taraf bir widget. - Yukarıdakilerin hiçbiri durumu açıklamıyorsa, lütfen bir yeniden üretim örneğiyle birlikte bir issue açın.