ngSkipHydration doit être un attribut statique

ngSkipHydration est un attribut spécial qui indique à Angular qu'un composant donné doit être exclu de l'hydratation. Ce diagnostic vérifie que cet attribut ngSkipHydration est défini de manière statique et que sa valeur est soit "true", soit vide.

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

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

Quel est le problème ?

En tant qu'attribut spécial implémenté par Angular, ngSkipHydration doit pouvoir être analysé statiquement afin qu'Angular sache à la compilation si l'hydratation est nécessaire ou non pour un composant.

Que faire à la place ?

Lorsque vous utilisez ngSkipHydration, assurez-vous de le définir comme un attribut statique (c'est-à-dire sans utiliser la syntaxe de binding de template Angular).

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

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

Si une condition est nécessaire, vous pouvez envelopper le composant dans un *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 {}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. skipHydrationNotStatic n'a pas d'autre prérequis que strictTemplates.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

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

Consultez la configuration des diagnostics étendus pour en savoir plus.