withEnabledBlockingInitialNavigation() is required to make hydration work for route component,...

I'm investigating why our application flickers when running on a slower network such as 3G/4G on a mobile while also using SSR, and I found that the router component disappears after a while, before popping back in (classic SSR rendering with no hydration, basically).

I dug deeper, and found this in the Angular devtools panel:



This seems to indicate that my lazy loaded route component wasn't hydrated, based on missing the little hydration icon to the far right.

These are my client and server configs respectively:

export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideClientHydration(withEventReplay(), withI18nSupport(), withIncrementalHydration(), withHttpTransferCacheOptions({ includePostRequests: true })),
provideHttpClient(withFetch(), withInterceptors([redirectInterceptor])),
provideRouter(routes, withComponentInputBinding()),
{ provide: LocationStrategy, useClass: PathLocationStrategy },
...
]
}



const serverConfig: ApplicationConfig = {
providers: [provideServerRendering(withRoutes(serverRoutes))],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);


But wait - it gets weirder. If I add withEnabledBlockingInitialNavigation() to provideRouter, it does get hydrated, and the problem goes away:



But the documentation specifically says not to do this, and it even gives this warning:

NG05001: Configuration error: found both hydration and enabledBlocking initial navigation in the same application, which is a contradiction.
​

So to summarise: I'm confused.

Have I not added something I'm supposed to to make hydration work without withEnabledBlockingInitialNavigation (I haven't found something I'm missing when going over the hydration docs), is there a bug in Angular or is the documentation regarding withEnabledBlockingInitialNavigation straight up wrong?

Continue reading...