Hidrasyon Desteklenmeyen DOM Düğümleri Projeksiyonu

Bu hata, sunucu tarafı serileştirme işlemi sırasında Angular'ın Angular bağlamı dışında oluşturulmuş (yani yerel DOM API'leri kullanılarak) düğümlerle karşılaştığı ve bu düğümlerin projelendirilebilir düğümler olarak sağlandığı anlamına gelir. Bunlar muhtemelen ViewContainerRef.createComponent veya createComponent API'leri kullanılarak sağlanmıştır. Angular hidrasyonu bu kullanım durumunu desteklememektedir.

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

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

@Component({
  selector: 'dynamic',
  template: `<ng-content />`,
})
class CardWrapper {}

@Component({
  selector: 'app',
  template: `<div #target></div>`,
})
class DynamicCard {
  @ViewChild('target', {read: ViewContainerRef}) vcr!: ViewContainerRef;
  envInjector = inject(EnvironmentInjector);

  ngAfterViewInit() {
    const div = document.createElement('div');
    const p = document.createElement('p');
    // Bu testte Angular bağlamı dışında DOM düğümleri oluşturuyoruz
    // (yani Angular API'lerini kullanmadan) ve bunları içerik projeksiyonu yapmaya çalışıyoruz.
    // Bu desteklenmeyen bir kalıptır ve bir istisna fırlatılacaktır.
    const compRef = createComponent(CardWrapper, {
      environmentInjector: this.envInjector,
      projectableNodes: [[div, p]],
    });
  }
}

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.

Olası bir geçici çözüm olarak bileşeninizin ana düğümüne ngSkipHydration özniteliğini ekleyebilirsiniz.