What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular error NG0507 means the HTML created by server-side rendering (SSR) changed before Angular could hydrate it in the browser. Hydration expects the server-rendered DOM—including whitespace and comment nodes—to remain intact. Start by checking whether a CDN, proxy, build step, application code, or third-party script is rewriting that HTML.
What does Angular NG0507 mean?
NG0507 is Angular’s error for HTML that was altered after server-side rendering but before hydration. Angular uses the server-produced DOM as the structure it hydrates on the client; if that structure changes, it may no longer match what Angular expects. The error identifies a mismatch, not the specific tool or code that caused it.
As an Amazon Associate I earn from qualifying purchases.
Angular’s hydration guide states: “The HTML produced by the server side rendering operation must not be altered between the server and the client.” That includes seemingly insignificant whitespace and HTML comments, not just visible elements.
Free tools Windows power users keep installed
One-click scans. No signup required.
How to diagnose NG0507
Trace the HTML from the server response to the moment Angular begins hydration. Check each layer that could transform it, then compare the delivered HTML with the DOM at hydration time.
#1 Best Overall
- Check CDN and proxy optimization. Look for settings that remove whitespace or comments from HTML. Angular’s NG0507 error reference specifically identifies these optimizations as possible causes.
- Inspect SSR post-processing. Review build, deployment, and runtime steps that rewrite or minify the server-rendered HTML. Temporarily bypass the transformation to see whether the error disappears.
- Check application code. Search for native DOM access or manipulation that runs before hydration. Angular’s guide highlights accessing
document, querying elements, adding nodes withappendChild, detaching or moving nodes, and changinginnerHTMLorouterHTML. - Check third-party scripts. A script that inserts, removes, or rewrites DOM nodes before hydration can cause a mismatch even if your own Angular components do not manipulate the DOM.
- Compare the HTML and DOM. Inspect the SSR response delivered to the browser, then examine the page as hydration begins. The point at which the two structures diverge narrows down which delivery layer, script, or component to investigate.
How to fix NG0507
Preserve the server-rendered HTML
Where a CDN, proxy, or post-processing step is responsible, configure it to leave Angular’s SSR HTML structure intact. In particular, avoid transformations that remove comments or whitespace. Fixing the transformation is preferable to working around its effects in application code.
Use Angular-compatible DOM patterns
If application code is changing the DOM before hydration, use Angular APIs where possible rather than directly manipulating native elements. For unavoidable third-party scripts that alter the DOM, defer their work until after hydration when feasible. Angular’s guide describes AfterNextRender as one option for scheduling work until after Angular has rendered.
Use ngSkipHydration only as a scoped workaround
Angular documents ngSkipHydration for a component that cannot yet hydrate correctly. It skips hydration for that component, which is then rendered again on the client. Use it only as a targeted workaround while addressing the underlying compatibility issue; it does not fix altered HTML caused by a CDN or post-processing layer.
Other hydration checks if the error persists
The dedicated NG0507 guidance focuses on HTML altered between SSR and hydration. Angular’s broader hydration guide also recommends checking for malformed HTML that the browser may correct into a different DOM structure. Examples include:
Rank #3
- A
<table>without an explicit<tbody>. - A
<div>inside a<p>. - Nested
<a>elements.
Also check that whitespace-preservation configuration is consistent. These are general hydration checks, rather than proof that any one of them caused NG0507. Angular’s Error Encyclopedia lists the current error and its label.
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.
