Este erro significa que durante o processo de serialização do lado do servidor, o Angular encontrou nodes que foram criados fora do contexto do Angular (ou seja, usando APIs DOM nativas) e descobriu que esses nodes foram fornecidos como nodes projetáveis. Eles provavelmente foram fornecidos usando as APIs ViewContainerRef.createComponent ou createComponent. A hydration do Angular não suporta este caso de uso.
Mais informações sobre hydration podem ser encontradas neste guia.
Os exemplos a seguir irão disparar o erro.
@Component({ selector: 'dynamic', template: ` <ng-content />`,})class DynamicComponent {}@Component({ selector: 'app', template: `<div #target></div>`,})class SimpleComponent { @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(DynamicComponent, { environmentInjector: this.envInjector, projectableNodes: [[div, p]] }); }}Depurando o erro
A mensagem de erro no console do desenvolvedor deve conter informações sobre uma parte específica da estrutura DOM da aplicação que está causando o problema. Revise essa parte da aplicação em busca de erros relacionados à hydration, como manipulação direta do DOM usando APIs nativas.
Você pode adicionar o atributo ngSkipHydration ao node host do seu component como uma possível solução alternativa.