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"
      }
    }
  }
}

См. конфигурацию расширенной диагностики для получения дополнительной информации.