Skip to content

hydration problems with ng-content #50175

@robertIsaac

Description

@robertIsaac

🐞 Bug report

What modules are related to this issue?

  • builders
  • common
  • express-engine

Is this a regression?

no

Description

when enabling hydration and passing content with ng-content, the ng-content is filled with nothing

3 changes that fixes the issue

  1. instead of using Material to use <div><ng-content></ng-content></div> (so it only happens with Angular Material, no idea why sorry)
  2. if I moved the actual content inside the layout component instead of passing it from app.component.html
  3. remove provideClientHydration()

🔬 Minimal Reproduction

https://github.com/robertIsaac/hydration-problem

🔥 Exception or Error

NA

🌍 Your Environment


Angular CLI: 16.0.0
Node: 16.18.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@nguniversal/builders           16.0.0
@nguniversal/express-engine     16.0.0
@schematics/angular             16.0.0
rxjs                            7.8.1
typescript                      5.0.4

Metadata

Metadata

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: coreIssues related to the framework runtimecore: hydrationstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions