Angular Hydration throws exception when in production

I have an Angular 17 app that has SSR, Prerender and Hydration enabled.

angular.json

{
....

"prerender": true,
"ssr": {
"entry": "projects/dental/server.ts",

...
}


app.module.ts

@NgModule({

...

providers: [
provideClientHydration(),
...
,]

...

})


It runs fine when served locally but in production it throws errors.

Errors

app.component.html

@if ((service.option$ | async); as common) {
<div class="page-body">
<app-header [option]="option"></app-header><br/>
<router-outlet></router-outlet>
<app-spinner></app-spinner>
</div>
<app-footer [option]="option"></app-footer>
}


core.mjs

core.mjs:6373 ERROR TypeError: n is not iterable
at m6 (core.mjs:13888:32)
at U6 (core.mjs:16045:42)
at V6 (core.mjs:15997:10)
at T (core.mjs:18023:3)
at template (app.component.html:1:1)
at ZT (core.mjs:10988:5)
at FC (core.mjs:12150:7)
at z5 (core.mjs:12096:3)
at j5 (core.mjs:12196:5)


When I inspect the core file I see this.

function locateDehydratedViewsInContainer(currentRNode, serializedViews) {
const dehydratedViews = [];
for (const serializedView of serializedViews) {
// Repeats a view multiple times as needed, based on the serialized information
// (for example, for *ngFor-produced views).
for (let i = 0; i < (serializedView[MULTIPLIER] ?? 1); i++) {
const view = {
data: serializedView,
firstChild: null
};
if (serializedView[NUM_ROOT_NODES] > 0) {
// Keep reference to the first node in this view,
// so it can be accessed while invoking template instructions.
view.firstChild = currentRNode;
// Move over to the next node after this view, which can
// either be a first node of the next view or an anchor comment
// node after the last view in a container.
currentRNode = siblingAfter(serializedView[NUM_ROOT_NODES], currentRNode);
}
dehydratedViews.push(view);
}
}
return [currentRNode, dehydratedViews];
}


I have attempted to isolate the components to identify the culprit but to no avail.

I have also skipped hydration for the components but I'm still getting same errors.

I also observed that when the error occurs the app losses its SPA capability and reloads on any page routing (change).

Continue reading...