Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: During hydration Angular expected a text node but found a comment node. #30125

Open
3 tasks done
AmitMY opened this issue Jan 9, 2025 · 0 comments
Open
3 tasks done
Labels

Comments

@AmitMY
Copy link
Contributor

AmitMY commented Jan 9, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Following from #28625

My only HTML file is: app.component.html

<ion-label>Home</ion-label>

provideServerRendering() causes

ERROR RuntimeError: NG0500: During hydration Angular expected a text node but found a comment node.

Fully:

RuntimeError: NG0500: During hydration Angular expected a text node but found a comment node.

Angular expected this DOM:

  #text(Home)  <-- AT THIS LOCATION
  


Actual DOM is:

<ion-label _ngcontent-ng-c982784965="">
  <!--  -->  <-- AT THIS LOCATION
  
</ion-label>

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.dev/errors/NG0500
    at validateMatchingNode (core.mjs:15140:11)
    at locateOrCreateTextNodeImpl (core.mjs:30741:16)
    at Module.ɵɵtext (core.mjs:30715:22)
    at AppComponent_Template (app.component.html:4:12)
    at executeTemplate (core.mjs:12849:5)
    at renderView (core.mjs:14018:7)
    at renderComponent (core.mjs:13964:3)
    at renderChildComponents (core.mjs:14064:5)
    at renderView (core.mjs:14046:7)
    at ComponentFactory.create (core.mjs:17381:9)

Expected Behavior

provideServerRendering should work with no issue.

Steps to Reproduce

  1. Clone https://github.com/sign/translate
  2. Edit app.component.html to include only <ion-label>Home</ion-label>
  3. Edit app.config.server.ts to include provideServerRendering()
  4. Run npm start

Code Reproduction URL

https://github.com/sign/translate

Ionic Info

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

Ionic CLI : 7.2.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.0.0
npm : 10.5.1
OS : macOS Unknown

"@ionic/angular": "8.4.1",

Additional Information

Blocks sign/translate#194 and angular/angular-cli#29236

@ionitron-bot ionitron-bot bot added the triage label Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant