Hydration behavior when client and server render different branches of an if-else block #58670
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
I don't know how to create a reproduction with SSR on Stackblitz, so please read it first and check the videos - perhaps you'll see what I'm talking about and what could cause that and perhaps it is a duplicate (I tried searching).
So, in the template, we have:
...
@if (store.$isAuthenticated()) {
<div class="nav-btn" (click)="...">
<mat-icon svgIcon="account"/>
<span i18n="@navbar.account" class="btn-label">Account</span>
</div>
} @else {
<div class="nav-btn" (click)="...">
<mat-icon svgIcon="account"/>
<span i18n="@navbar.signup" class="btn-label">Sign Up</span>
</div>
}
...As you can see, they can never be rendered together.
But if I use withI18nSupport():
with.mov
And if I remove withI18nSupport():
without.mov
This is ng serve with "ssr": true, but deployed versions behave the same.
Full app config:
export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideRouter(appRoutes,
withComponentInputBinding(),
withInMemoryScrolling({
anchorScrolling: 'enabled',
scrollPositionRestoration: 'top',
}),
withRouterConfig({
onSameUrlNavigation: 'ignore',
urlUpdateStrategy: 'eager'
}),
withPreloading(CrPreloadingStrategy)
),
provideAnimationsAsync(),
provideHttpClient(withInterceptors([authInterceptor]), withFetch()),
provideClientHydration(
withIncrementalHydration(),
withEventReplay(),
),
provideNgxStripe(),
// provideServiceWorker('ngsw-worker.js', {
// enabled: !isDevMode(),
// registrationStrategy: 'registerWhenStable:30000'
// }),
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => cloudflareImgLoader(config, environment.imgDomain)
},
....Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular 19.0.0-rc.2 and rc.1 (checked).
Anything else?
No response