ngSkipHydration should be a static attribute

ngSkipHydration is a special attribute which indicates to Angular that a particular component should be opted-out of hydration. This diagnostic ensures that this attribute ngSkipHydration is set statically and the value is either set to "true" or an empty value.

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

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

What's wrong with that?

As a special attribute implemented by Angular, ngSkipHydration needs to be statically analyzable so Angular knows at compile-time whether or not hydration is needed for a component.

What should I do instead?

When using the ngSkipHydration, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax).

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

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

If a conditional is necessary, you can wrap the component in an *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 {}

Configuration requirements

strictTemplates must be enabled for any extended diagnostic to emit. skipHydrationNotStatic has no additional requirements beyond strictTemplates.

What if I can't avoid this?

This diagnostic can be disabled by editing the project's tsconfig.json file:

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

See extended diagnostic configuration for more info.