Angular NG0504 means ngSkipHydration is attached to a node that is not a component host. Remove the attribute from the ordinary DOM element, or move it to the host node of the component you intend to exclude from hydration.
Why Angular raises NG0504
ngSkipHydration is valid only on a component host, whether it is added directly in a template or through a host binding. An ordinary element such as a <div> is not a component host, so putting the attribute there triggers NG0504. Adding it through a directive does not change the target element into a component host. Angular’s NG0504 reference documents both invalid placements.
As an Amazon Associate I earn from qualifying purchases.
How to fix NG0504
- Find the invalid node. Inspect the element reported by the error and locate its template or the host binding that adds
ngSkipHydration. - Remove or relocate the attribute. If the node is a regular HTML element, remove the attribute. If you need to skip hydration for a component, put it on that component’s host node instead.
- Rebuild or reload and check the result. Confirm NG0504 is gone. If a hydration mismatch still occurs, investigate that mismatch separately.
For example, this placement on an ordinary element is invalid:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<div ngSkipHydration>...</div>Likewise, a directive host binding that adds ngSkipHydration to a <div> remains invalid: the attribute still targets a regular DOM node. Apply the workaround to a component host, not to an element merely because a directive sets the attribute.
#1 Best Overall
What skipping hydration changes
On a valid component host, the attribute opts that component and its children out of hydration. Angular destroys and renders them again as if hydration were not enabled. This can work around a rendering problem, but that component does not receive hydration’s benefits while the attribute remains. Angular presents the skip as a workaround and recommends addressing hydration-breaking patterns so the annotation can eventually be removed. See the Angular hydration guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.If hydration errors remain
NG0504 is a placement error. If moving or removing the attribute reveals or leaves a separate hydration mismatch, check for code that changes the DOM outside Angular and for invalid HTML structure. Angular lists examples including a table without an explicit <tbody>, a <div> inside a <p>, and nested anchors. Angular’s NG0500 guidance discusses node mismatch causes; the hydration guide also describes Angular DevTools, a browser extension that can show hydration status and highlight a component associated with a mismatch.
Quick Recap
Rank #3
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.
Recommended Free Tools
