このエラーは、ngSkipHydration 属性が適切でないDOMノードに適用された場合に発生します。ngSkipHydration 属性は、テンプレートまたはホストバインディングを介して直接、コンポーネントホストノードのみに適用できます。他のDOMノードには適用できず、このエラーが発生する以外、効果はありません。
水和の詳細については、このガイドをご覧ください。
次の例では、エラーが発生します。
例 1
この例では、ngSkipHydration 属性は、ディレクティブのホストバインディングを使用して <div> に適用されています。<div> はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
@Directive({ standalone: true, selector: '[dir]', host: {ngSkipHydration: 'true'},})class Dir {}@Component({ standalone: true, selector: 'app', imports: [Dir], template: ` <div dir></div> `,})class SimpleComponent {}
例 2
この例では、ngSkipHydration はテンプレートを介して属性として <div> に適用されています。
<div> はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
@Component({ standalone: true, selector: 'app', template: ` <div ngSkipHydration></div> `,})class SimpleComponent {}
エラーのデバッグ
不正なDOMノードから ngSkipHydration 属性を削除します。または、ngSkipHydration 属性をテンプレートまたはホストバインディングを介してコンポーネントホストノードに移動します。