What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
NG8108 means Angular cannot determine from your template whether ngSkipHydration is enabled. Set it as a static attribute—<user-viewer ngSkipHydration> or <user-viewer ngSkipHydration="true">—instead of binding its value to an expression. If the choice depends on application state, conditionally render a component branch with the static attribute. Skipping hydration is a workaround: Angular destroys and re-renders that component and its descendants on the client.
What NG8108 means
NG8108 is Angular’s skipHydrationNotStatic extended diagnostic. It flags a ngSkipHydration attribute in template markup whose value is not statically analyzable. Angular needs to know at compile time whether to hydrate the component; a template expression such as ngSkipHydration="hasUser" does not provide a static value.
Extended diagnostics are template and compiler checks for patterns that may lead to unintended behavior. NG8108 emits when strictTemplates is enabled. See Angular’s NG8108 diagnostic documentation and extended diagnostics overview.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsHow to fix the attribute
Use a static value
For an unconditional opt-out, put the attribute directly on the component host. Angular accepts an empty attribute or the literal string true:
#1 Best Overall
<user-viewer ngSkipHydration />
<user-viewer ngSkipHydration="true" />Do not substitute a variable or expression for the value. The special attribute must also be on a component host, not an ordinary DOM element. Putting it on a regular element such as div causes NG0504; see Angular’s NG0504 guidance.
Make the choice conditional by rendering a branch
If application state determines whether the component should skip hydration, keep the attribute static and render separate branches. For example, using *ngIf and ng-template:
<user-viewer *ngIf="hasUser; else regularViewer" ngSkipHydration />
<ng-template #regularViewer>
<user-viewer />
</ng-template>The selected branch determines whether the component host includes the attribute; the attribute itself is never dynamically bound. Adapt the control-flow syntax to your Angular version.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteKeep the host-binding form distinct
Angular’s hydration guide also documents setting ngSkipHydration in a component’s host metadata, for example host: {ngSkipHydration: 'true'}. This is a host-level mechanism, not a reason to dynamically bind the special attribute in template markup. See the Angular hydration guide for the documented form and usage.
Rank #3
Understand the cost before skipping hydration
Skipping hydration applies to the component and its children. Angular treats that region as if hydration were not enabled, destroying and re-rendering it on the client. This can restore rendering for a component that is incompatible with hydration, but the subtree no longer receives hydration’s benefits.
Use the attribute as a last-resort workaround and, where possible, fix the hydration-breaking behavior instead. Angular’s hydration guide says, “Components that break hydration should be considered bugs that need to be fixed.” Avoid putting ngSkipHydration on the root application component: doing so effectively disables hydration for the application.
Configure or suppress NG8108
Extended diagnostics require strictTemplates. NG8108 can be configured under angularCompilerOptions.extendedDiagnostics.checks.skipHydrationNotStatic; Angular’s diagnostic page shows suppress as a way to disable the check. Suppression hides the warning but does not make a dynamic template value statically analyzable, so prefer correcting the template unless the project has a specific reason to suppress it.
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"skipHydrationNotStatic": "suppress"
}
}
}
}For version-specific behavior, consult the Angular documentation matching the major version installed in your project; compiler behavior and guidance can change between versions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
