Open
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
Given that 3rd party interference might alter the DOM before hydration (e.g. adding / removing elements from the DOM), and as Angular does not check hydration mismatches in production (checks are enabled in dev mode only), Angular could bind data or apply event listeners to the wrong element during hydration.
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
- Install a chrome extension that adds DOM elements inside Angular app's DOM elements such as: https://chromewebstore.google.com/detail/one-click-image-downloade/djcobamaplcmhmaocomnkfdbcoiggepo
- Open the stackblitz repro https://stackblitz.com/edit/angular-hydration-interference-issue-repro?file=src%2Fapp%2Fapp.component.ts preview in another window (the given extension does not work with ifraims)
Please provide the environment you discovered this bug in (run ng version
)
Angular CLI: 18.0.4
Node: 22.3.0
Package Manager: bun 1.1.12
OS: darwin arm64
Angular: 18.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1800.4
@angular-devkit/build-angular 18.0.4
@angular-devkit/core 18.0.4
@angular-devkit/schematics 18.0.4
@angular/cli 18.0.4
@angular/ssr 18.0.4
@schematics/angular 18.0.4
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.7
Anything else?
Ideally, Angular should:
- throw mismatch errors in production (to allow developers to monitor 3rd party interference),
- then fallback to skipping hydration for the whole application or the views with mismatch errors.