Hydratation : projection de nœuds DOM non prise en charge

Cette erreur signifie que, pendant le processus de sérialisation côté serveur, Angular a rencontré des nœuds créés en dehors du contexte d'Angular (c'est-à-dire avec des API DOM natives) et a constaté que ces nœuds étaient fournis comme nœuds projetables. Ils ont probablement été fournis via les API ViewContainerRef.createComponent ou createComponent. L'hydratation d'Angular ne prend pas en charge ce cas d'usage.

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

Les exemples suivants déclenchent l'erreur.

@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');
    // In this test we create DOM nodes outside of Angular context
    // (i.e. not using Angular APIs) and try to content-project them.
    // This is an unsupported pattern and an exception will be thrown.
    const compRef = createComponent(CardWrapper, {
      environmentInjector: this.envInjector,
      projectableNodes: [[div, p]],
    });
  }
}

Déboguer l'erreur

Le message d'erreur dans la console du développeur devrait contenir des informations sur la partie précise de la structure DOM de l'application qui pose problème. Examinez cette partie de l'application à la recherche d'erreurs liées à l'hydratation, comme une manipulation directe du DOM avec des API natives.

Vous pouvez ajouter l'attribut ngSkipHydration au nœud host de votre composant comme solution de contournement possible.