Skip hydration flag is applied to an invalid node

このエラーは、ngSkipHydration 属性が適切でないDOMノードに適用された場合に発生します。ngSkipHydration 属性は、テンプレートまたはホストバインディングを介して直接、コンポーネントホストノードのみに適用できます。他のDOMノードには適用できず、このエラーが発生する以外、効果はありません。

水和の詳細については、このガイドをご覧ください。

次の例では、エラーが発生します。

例 1

この例では、ngSkipHydration 属性は、ディレクティブのホストバインディングを使用して <div> に適用されています。<div> はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。

@Directive({
  selector: '[dir]',
  host: {ngSkipHydration: 'true'},
})
class Dir {}

@Component({
  selector: 'app',
  imports: [Dir],
  template: ` <div dir></div> `,
})
class Simple {}

例 2

この例では、ngSkipHydration はテンプレートを介して属性として <div> に適用されています。 <div> はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。

@Component({
  selector: 'app',
  template: ` <div ngSkipHydration></div> `,
})
class Simple {}

エラーのデバッグ

不正なDOMノードから ngSkipHydration 属性を削除します。または、ngSkipHydration 属性をテンプレートまたはホストバインディングを介してコンポーネントホストノードに移動します。