NG0500 Angular Origin: On your device Angular 16+ Last updated 15 Oct 2026

Angular SSR: NG0500: During hydration Angular expected <div> but found <span> (NG0501, NG0502)

The HTML rendered on the server does not match what the browser's Angular app tried to render, so hydration failed and the page was re-rendered.

Exact message you may see NG0500: During hydration Angular expectedDuring hydration Angular expectedhydration mismatch
Explore the map of this error Full error map →
Seen on: Angular TypeScript

Meaning

Hydration reuses the server DOM. If the DOM differs (invalid HTML nesting, DOM changed by third-party scripts, whitespace changes, browser-only branches rendering different markup), Angular throws NG0500–NG0502 and falls back to client rendering. Fix invalid nesting (<p> inside <p>, <div> in <table>), avoid manual DOM edits, and make server and browser render the same.

Common causes

  • Invalid HTML nesting that the browser auto-corrects (<div> inside <p>, <table> without <tbody>)
  • Direct DOM manipulation (innerHTML, jQuery) outside Angular
  • Content that differs between server and browser (window, dates, random values)
  • CDN/minifier changing the HTML (whitespace removal, injected scripts)
  • Third-party widgets modifying the DOM before bootstrap

⚡ Quick fix

  1. Fix invalid HTML structure reported in the message
  2. Use ngSkipHydration on the component that must manipulate the DOM
  3. Render browser-only content with afterNextRender or isPlatformBrowser

Detailed fix by platform

Angular

  1. <app-widget ngSkipHydration></app-widget> for components that change the DOM
  2. Defer browser-only code: afterNextRender(() => { this.chart.init(); });

Code examples

Invalid nesting breaks hydration

html
<!-- wrong: browsers close <p> before <div>, so server and client DOM differ -->
<p><div>Hello</div></p>

<!-- right -->
<div><div>Hello</div></div>

How to diagnose

  1. Message — Which element did Angular expect vs find?
  2. HTML — Valid nesting?
  3. DOM — Anything changing it outside Angular?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Cannot find control with name — Angular: Error: Cannot find control with name: 'email' (reactive forms) (Angular)Cannot find control w…Could not find the builder's node package — Angular CLI: Could not find the '@angular-devkit/build-angular:browser' builder's node package / Cannot find module '@angular-devkit/build-angular/package.json' (Angular)Could not find the bu…exceeded maximum budget — Angular build: Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 120.00 kB with a total of 1.12 MB (Angular)exceeded maximum budg…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedNG0100 — Angular: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked (Angular)NG0100Schema validation failed with the following errors — Angular CLI: Schema validation failed with the following errors: Data path "" must NOT have additional properties(xyz) (Angular)Schema validation fai…window is not defined — Angular SSR: ReferenceError: window is not defined / document is not defined / localStorage is not defined (Angular)window is not definedNG0500

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.