Repository navigation
Nested anchor elements break hydration #55441
Description
Which @angular/* package(s) are the source of the bug?
platform-browser
Is this a regression?
Yes
Description
When an anchor element is inside another anchor element, the hydration fails.
@Component({
selector: 'app-root',
standalone: true,
template: `
<a>
outer
<a>inner</a>
</a>
`
})
export class AppComponent { }Its rendering also does not match the reality; the two anchor elements should be parent-child, not brother.
Please provide a link to a minimal reproduction of the bug
https://github.com/HyperLife1119/ng-ssr
Please provide the exception or error you saw
Error: NG0500: During hydration Angular expected <a> but the node was not found.
Angular expected this DOM:
<a>
…
#text( outer )
<a>…</a> <-- AT THIS LOCATION
…
</a>
Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.
To fix this problem:
* check the "_AppComponent" component for hydration-related issues
* check to see if your template has valid HTML structure
* or skip hydration by adding the `ngSkipHydration` attribute to its host node in a template
Find more at https://angular.io/errors/NG0500
at validateMatchingNode (core.mjs:13482:15)
at locateOrCreateElementNodeImpl (core.mjs:23095:18)
at Module.ɵɵelementStart (core.mjs:22993:20)
at AppComponent_Template (app.component.ts:10:7)
at executeTemplate (core.mjs:11268:9)
at renderView (core.mjs:12470:13)
at renderComponent (core.mjs:12416:5)
at renderChildComponents (core.mjs:12518:9)
at renderView (core.mjs:12498:13)
at ComponentFactory.create (core.mjs:15859:17)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.3.5
Node: 18.19.0
Package Manager: npm 10.2.3
OS: darwin arm64
Angular: 17.3.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.5
@angular-devkit/build-angular 17.3.5
@angular-devkit/core 17.3.5
@angular-devkit/schematics 17.3.5
@schematics/angular 17.3.5
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4
Anything else?
No response
Activity
[-]Unable to hydrate nested anchor tags[/-][+]Unable to hydrate nested anchor element[/+][-]Unable to hydrate nested anchor element[/-][+]Unable to hydrate nested anchor elements[/+]JeanMeche commentedon Apr 20, 2024
Nested anchor tags are not valid HTML, this is pretty much expected.
It's the browser itself when parsing the dom that converts
into
HyperLife1119 commentedon Apr 20, 2024
Thank you very much, I didn't realize that. :)
JeanMeche commentedon Apr 20, 2024
I'll close this as a dupe of #54943. It would be great if we provided some template validity checking, as there are several cases where this breaks hydration.
angular-automatic-lock-bot commentedon May 21, 2024
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
[-]Unable to hydrate nested anchor elements[/-][+]Nested anchor elements break hydration[/+]