유효하지 않은 노드에 적용된 하이드레이션 건너뛰기 플래그

적절하지 않은 DOM 노드에 ngSkipHydration 속성을 추가하면 이 오류가 발생합니다. ngSkipHydration 속성은 템플릿에서 직접 지정하거나 호스트 바인딩을 통해 컴포넌트 호스트 노드에만 적용할 수 있습니다. 다른 DOM 노드에는 적용할 수 없으며, 적용해도 이 오류만 발생하고 아무런 효과가 없습니다.

하이드레이션에 대한 자세한 내용은 이 가이드를 참고하세요.

다음 예제에서는 이 오류가 발생합니다.

예제 1

이 예제에서는 디렉티브의 호스트 바인딩으로 <div>에 ngSkipHydration 속성을 적용합니다. <div>가 컴포넌트 호스트 노드가 아니므로 Angular가 오류를 발생시킵니다.

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

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

예제 2

이 예제에서는 템플릿에서 <div>에 ngSkipHydration 속성을 적용합니다. <div>가 컴포넌트 호스트 노드가 아니므로 Angular가 오류를 발생시킵니다.

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

오류 디버깅

유효하지 않은 DOM 노드에서 ngSkipHydration 속성을 제거하세요. 또는 템플릿이나 호스트 바인딩을 통해 이 속성을 컴포넌트 호스트 노드로 옮기세요.