Angular hydration waiting for defer to be done and show the if and the else

Problem


I have an angular 18 application with ssr enabled.

On this application I have a component that show information based on a boolean (whether the user is logged or not).

This boolean is never true on server side, so it will only be displayed on client side.

To simplify the debug I am currently using a boolean that is true when it's client side, and is defined inside the constructor of my component

isBrowserSide:boolean;

constructor(
@Inject(PLATFORM_ID) platformId: Object,
) {
this.isBrowserSide = isPlatformBrowser(platformId);
}


Inside the html template it's used like this:

Is Browser = {{isBrowserSide}}
@if(isBrowserSide){
Inside if: browser bool = {{isBrowserSide}}
} @else{
Inside else: browser bool = {{isBrowserSide}}
}


The problem is that when I load the page both if and else are rendered, and then it will be good after some seconds.

What did I found


On an other components I have a defer with a placeholder minium, and my if will be right only when the defer is finished (Originaly the minimum is 2.5s but I increased it to 20s to confirm the origin).

<app-navbar></app-navbar> <-- thats where the if is

@defer{
test
} @placeholder(minimum 20.5s){
}


In the console I get two messages:

NG0506: Angular hydration expected the ApplicationRef.isStable() to emit `true`, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process. Find more at https://angular.dev/errors/NG0506


And the second:

Angular hydrated 29 component(s) and 354 node(s), 0 component(s) were skipped. Learn more at https://angular.dev/guide/hydration.


Thats when the second show up that the wrong condition is removed from the html.

Also when I look the html sent by the server, the conditions are right. So it's like the browser run the other condition but keep the server side condition until it's stable.

Do you have any idea why it's doing this ? And how to fix it ?

I also created a stackflitz with exacly the same code as above: https://stackblitz.com/edit/angular-18-ssr-zozj4bpz

Continue reading...