SSR Duplicate elements with provideClientHydration()

[kyjus25]

Describe the bug

Using the pButton directive or p-carousel with a set autoplayInterval causes duplicate PrimeNG elements to render. There are most likely more scenarios where this is an issue but I am noting what we have found for others.

pButton	Menu	Carousel

Update: Occurs when provideClientHydration() is enabled, and occurs on a fresh load (does not happen on subsequent client-side navigation)

Possibly related: angular/angular#50543

Environment

Occurs on Angular CLI with application builder & Analog when provideClientHydration() is enabled

Reproducer

No response

Angular version

17.0.0 - 17.0.9

PrimeNG version

17.3.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

No response

Steps to reproduce the behavior

• ng new primeng-test --ssr
• Include Lara blue and primeicons
• <button pButton label="Join Now" icon="pi pi-discord"></button> (note pButton, not p-button)

Expected behavior

Only 1 icon and 1 label to render

[kyjus25]

@cetincakiroglu Button was only one of the places I found the issue. Menu, Carousel, and the doc code examples themselves also exhibited duplicate elements, but I didn't check extensively thru every component

Unfortunately this only occurs on a fresh page load when hydration takes place, subsequent client side navigation works as a typical SPA would and does not duplicate elements, so it's a little tedious to track down. Probably each component would need to be routed and checked with a fresh page load for anything that looks sus

[cetincakiroglu]

Thanks a lot for letting me know, I'll check the rest and need to find an extended solution to apply several places.

[echotech11]

The galleria / carousel also have this issue.
ng serve:

ng run app:serve-ssr:

[cetincakiroglu]

Hi all,

Those experiencing this issue can solve the problem of multiple rendering of the relevant components by using ngSkipHydration . This issue is related to Angular's own template components and is beyond our scope of intervention. You can use this workaround temporarily until the Angular team fixes the issue. For more information, please visit https://angular.dev/guide/hydration#how-to-skip-hydration-for-particular-components.