Skip to content

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

Open
@AmitMY

Description

@AmitMY

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions