Este erro significa que durante o processo de hidratação, o Angular esperava uma estrutura DOM como renderizada e anotada durante a renderização no servidor. No entanto, no cliente, a árvore DOM era diferente da árvore DOM renderizada no servidor.
Este erro normalmente acontece devido à manipulação direta do DOM usando APIs nativas do browser que alteram a estrutura DOM fora do que o Angular produziu. Também ocorrerá se você usar innerHTML ou outerHTML para definir conteúdo HTML, que similarmente altera a estrutura DOM fora do que o Angular produziu. Você pode resolver isso refatorando o component para usar APIs nativas do Angular em vez de APIs nativas. Se isso não for possível, você pode adicionar o atributo ngSkipHydration ao nó host do seu component, que desabilitará a hidratação para o component e seus filhos. ngSkipHydration deve ser usado apenas como último recurso e deve ser considerado um bug que precisa ser corrigido.
Mais informações sobre hidratação podem ser encontradas neste guia.
O seguinte exemplo disparará o erro.
@Component({ selector: 'app-example', template: '<div><span>world</span></div>',})export class ExampleComponent { hostElement = inject(ElementRef).nativeElement; ngOnInit() { // Cria um novo elemento <p> com o texto `Hello` dentro const newNode = document.createElement('p'); newNode.innerHTML = 'Hello'; // Insere o <p> antes do primeiro elemento. Como o Angular não tem informação // sobre o elemento <p>, ele estará procurando o elemento <div> na primeira // posição do elemento. Como resultado, um erro de incompatibilidade de hidratação seria // lançado. Em vez disso, atualize o template do component para criar o elemento <p>. this.hostElement.insertBefore(newNode, this.hostElement.firstChild); }}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 aquela parte da aplicação para erros relacionados à hidratação, como manipulação direta do DOM usando APIs nativas.
Verifique se seu template tem estrutura HTML válida. Veja mais informações no guia de hidratação.
Você pode adicionar o atributo ngSkipHydration ao nó host do seu component como uma possível solução alternativa.
Se sua aplicação funciona no ambiente de desenvolvimento, mas você vê erros de hidratação em builds de produção, certifique-se de que o HTML gerado que é entregue a um browser contém nós de comentário produzidos pelo Angular durante a renderização no servidor. Esses nós de comentário são usados pelo runtime do Angular como âncoras para containers de view (com e sem hidratação) e o processo de hidratação espera que eles estejam presentes em suas localizações originais. Se você tem uma lógica customizada para remover nós de comentário do HTML gerado pela renderização no servidor ou você configurou sua CDN para removê-los antes de servir o conteúdo - desabilite a remoção de nós de comentário e verifique se os erros de hidratação desaparecem.