このエラーは、ハイドレーションプロセス中に、Angularがサーバーサイドレンダリング時にレンダリングおよび注釈付けされたDOM構造を期待していることを意味します。ただし、クライアント側では、DOMツリーがサーバー側でレンダリングされたDOMツリーとは異なるものでした。
このエラーは、通常、Angularが生成したものを超えてDOM構造を変更するネイティブブラウザAPIを使用した直接的なDOM操作によって発生します。同様に、Angularが生成したものを超えてDOM構造を変更する innerHTML または outerHTML を使用してHTMLコンテンツを設定した場合にも発生します。ネイティブAPIの代わりにネイティブAngular APIを使用するようにコンポーネントをリファクタリングすることで、これを解決できます。それが不可能な場合は、コンポーネントのホストノードに ngSkipHydration 属性を追加できます。これにより、コンポーネントとその子のハイドレーションが無効になります。ngSkipHydration は、最後の手段としてのみ使用し、修正が必要なバグとして扱う必要があります。
ハイドレーションの詳細については、このガイドを参照してください。
次の例では、エラーが発生します。
@Component({ standalone: true, selector: 'app-example', template: '<div><span>world</span></div>',})export class ExampleComponent { hostElement = inject(ElementRef).nativeElement; ngOnInit() { // `Hello` テキストを含む新しい <p> 要素を作成する const newNode = document.createElement('p'); newNode.innerHTML = 'Hello'; // <p> 要素を最初の要素の前に挿入します。Angular に <p> 要素に関する情報がないため、 // 最初の要素の位置で <div> 要素を探します。 // その結果、Hydration ミスマッチエラーがスローされます。 // 代わりに、コンポーネントのテンプレートを更新して <p> 要素を作成します。 this.hostElement.insertBefore(newNode, this.hostElement.firstChild); }}
エラーのデバッグ
開発者コンソール内のエラーメッセージには、問題を引き起こしているアプリケーションのDOM構造の特定の部分に関する情報が含まれているはずです。ネイティブAPIを使用した直接的なDOM操作など、ハイドレーション関連のエラーについて、アプリケーションのその部分を確認します。
テンプレートが有効なHTML構造であることを確認します。Hydration ガイドで詳細を確認してください。
コンポーネントのホストノードに ngSkipHydration 属性を追加することで、回避策として使用できます。
アプリケーションが開発環境では動作するが、本番ビルドで ハイドレーション エラーが発生する場合は、ブラウザに配信される生成されたHTMLに、サーバーでのレンダリング中にAngularによって生成されたコメントノードが含まれていることを確認してください。これらのコメントノードは、Angularランタイムによってビューコンテナのアンカー (ハイドレーション の有無にかかわらず) として使用され、ハイドレーション プロセスでは、これらのノードが元の位置に存在することを期待します。サーバーサイドレンダリングによって生成されたHTMLからコメントノードを削除するカスタムロジックがある場合、またはCDNを構成してコンテンツを提供する前にコメントノードを削除した場合、コメントノードの削除を無効にして、ハイドレーション エラーが解消されるかどうかを確認してください。