Frontend New Added 9 September 2026

Angular: NG0100: ExpressionChangedAfterItHasBeenCheckedError

A binding produced one value during change detection and a different one when Angular verified the pass in development mode. It normally means a parent reads state that a child mutates while initialising, so the check runs before the value has settled. Production builds skip the verification, which is why it never reproduces there.

Quick fix

Read the commands before running them. Anything that restarts a service, deletes data or changes permissions should be tried on a non-production system first.

Quick fix

// Move the mutation out of the pass being checked
ngAfterViewInit() {
  Promise.resolve().then(() => this.title = this.child.title);
}

// Or ask for another pass explicitly
constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewInit() { this.total = this.rows.length; this.cdr.detectChanges(); }

// Getters that build a new object on every call trip it as well
get options() { return { a: 1 }; }   // a new reference each check
readonly options = { a: 1 };         // stable

// Signals avoid the whole class of problem
count = signal(0);

How to diagnose Frontend errors

Modern frontend errors are dominated by the boundary between server rendering and client hydration. A hydration mismatch means the HTML the server produced does not match what the client would have rendered, usually because of a date, a random value, a browser-only API, or user-specific content rendered during SSR. The second large family is bundler resolution, where the error names a module but the real cause is configuration.

If the quick fix above does not resolve it, work through these steps. They apply to this whole class of error, not just to this one message, which is usually what saves the time.

For hydration errors, read the diff the framework prints: React, Nuxt and Astro all show the mismatched node. Look for Date, Math.random, window, localStorage and locale formatting in that subtree.
Deliberately defer browser-only rendering with a mount effect or the framework's client-only directive rather than suppressing the warning.
For resolution errors, run the bundler with verbose logging and check whether the package ships ESM, CJS or both, and whether your conditions / mainFields configuration selects the right one.
Diagnose layout shift with Lighthouse or the Performance panel's Layout Shift regions. Nearly all CLS comes from images without dimensions, injected banners, and web fonts without font-display: swap.
Reproduce production build failures locally with NODE_ENV=production; dev servers are far more forgiving than production builds.

Tools worth reaching for

Lighthouse
Chrome Performance panel
vite build --debug
webpack-bundle-analyzer
React DevTools

Authoritative references

Primary documentation for this error, worth reading before applying any fix in production.

angular.dev

Related Frontend errors

See all 23 Frontend errors →

Browse other categories

Something missing or wrong?

This entry is maintained by hand. If the fix is out of date, incomplete, or you have a better one, email a correction and it will be reviewed.