`ngSkipHydration`은 정적 어트리뷰트여야 합니다

ngSkipHydration은 특정 컴포넌트를 하이드레이션에서 제외해야 한다는 것을 Angular에 알리는 특수 어트리뷰트입니다. 이 진단은 ngSkipHydration 어트리뷰트가 정적으로 설정되었고 그 값이 "true" 또는 빈 값인지 확인합니다.

import {Component} from '@angular/core';

@Component({
  template: `<user-viewer ngSkipHydration="hasUser" />`,
})
class MyComponent {
  hasUser = true;
}

무엇이 문제인가요?

ngSkipHydration은 Angular가 구현한 특수 어트리뷰트로, Angular가 컴파일 시점에 컴포넌트에 하이드레이션이 필요한지 판단할 수 있도록 정적으로 분석할 수 있어야 합니다.

어떻게 해결하나요?

ngSkipHydration을 사용할 때는 정적 어트리뷰트로 설정하세요. 즉, Angular 템플릿 바인딩 문법을 사용하지 않아야 합니다.

import {Component} from '@angular/core';

@Component({
  template: `
    <user-viewer ngSkipHydration />
    <user-viewer ngSkipHydration="true" />
  `,
})
class MyComponent {}

조건이 필요하다면 컴포넌트를 *ngIf로 감쌀 수 있습니다.

import {Component} from '@angular/core';

@Component({
  template: `
    <div *ngIf="hasUser; else noUser">
      <user-viewer ngSkipHydration />
    </div>

    <ng-template #noUser>
      <user-viewer />
    </ng-template>
  `,
})
class MyComponent {}

필수 설정

확장 진단이 발생하려면 strictTemplates를 활성화해야 합니다. skipHydrationNotStatic에는 strictTemplates 외의 추가 요구 사항이 없습니다.

이 상황을 피할 수 없다면 어떻게 하나요?

프로젝트의 tsconfig.json 파일을 수정하여 이 진단을 비활성화할 수 있습니다.

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "skipHydrationNotStatic": "suppress"
      }
    }
  }
}

자세한 내용은 확장 진단 설정을 참고하세요.