Repository navigation
false hydration error NG0502 reported #57063
Description
Which @angular/* package(s) are the source of the bug?
platform-server
Is this a regression?
No
Description
for some reason this simple code throw error only in dev
while everything is fine in production, it makes working locally and debugging very hard
Please provide a link to a minimal reproduction of the bug
https://github.com/robertIsaac/ssr-reprod-error
Please provide the exception or error you saw
ERROR Error: NG0502: During hydration, Angular expected an element to be present at this location.
<app-comment _ngcontent-ng-c4218927208="" _nghost-ng-c3759892978="" id="1">
…
<!-- container --> <-- AT THIS LOCATION
…
</app-comment>
To fix this problem:
* check corresponding 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.dev/errors/NG0502
at validateNodeExists (core.mjs:13539:11)
at locateOrCreateContainerAnchorImpl (core.mjs:19014:16)
at declareTemplate (core.mjs:18929:19)
at Module.ɵɵrepeaterCreate (core.mjs:23290:3)
at CommentComponent_Template (comment.component.html:1:1)
at executeTemplate (core.mjs:11264:5)
at renderView (core.mjs:12426:7)
at renderComponent (core.mjs:12372:3)
at renderChildComponents (core.mjs:12472:5)
at renderView (core.mjs:12454:7)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 18.1.1
Node: 20.14.0
Package Manager: npm 10.8.2
OS: win32 x64
Angular: 18.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1801.1
@angular-devkit/build-angular 18.1.1
@angular-devkit/core 18.1.1
@angular-devkit/schematics 18.1.1
@schematics/angular 18.1.1
rxjs 7.8.1
typescript 5.5.3
zone.js 0.14.8
Anything else?
-
you can see in the repo multiple commits from the original reproduce I made till the most simple form it's now
for example this happen even with routing, but only if you are in answer route and you refresh the page -
if in
question.component.htmlyou removed the<p>the error will go away
Activity
JeanMeche commentedon Jul 20, 2024
Hi,
This is duplicate of #56392,
divelements in paragraph elements are not valid.becomes
Which causes the hydration mismatch.
robertIsaac commentedon Jul 21, 2024
after changing
ptodivit does workI never noticed that was the issue
angular-automatic-lock-bot commentedon Aug 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.