Enabling prerender causing serializedViews is not iterable

[hhsissi]

Which @angular/* package(s) are the source of the bug?

platform-server, Don't known / other

Is this a regression?

Yes

Description

The error mentionned happens on various pages:

1- pages behind a guard after a refresh
2- random urls having the same component and route pattern: news/:newsSlug

setting:

  "prerender": false

fixes the problem.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

1 stack trace:

chunk-WZ4OXYRL.js:6457 ERROR TypeError: serializedViews is not iterable
    at locateDehydratedViewsInContainer (chunk-WZ4OXYRL.js:10882:32)
    at populateDehydratedViewsInLContainerImpl (chunk-WZ4OXYRL.js:12202:42)
    at locateOrCreateAnchorNode (chunk-WZ4OXYRL.js:12212:8)
    at createContainerRef (chunk-WZ4OXYRL.js:12161:3)
    at injectViewContainerRef (chunk-WZ4OXYRL.js:11983:10)
    at lookupTokenUsingNodeInjector (chunk-WZ4OXYRL.js:6031:17)
    at getOrCreateInjectable (chunk-WZ4OXYRL.js:6008:19)
    at ɵɵdirectiveInject (chunk-WZ4OXYRL.js:8793:17)
    at ɵɵinject (chunk-WZ4OXYRL.js:3355:59)
    at inject (chunk-WZ4OXYRL.js:3364:10)
handleError @ chunk-WZ4OXYRL.js:6457
(anonymous) @ chunk-WZ4OXYRL.js:20015
invoke @ polyfills-JWOJ23JA.js:295
run @ polyfills-JWOJ23JA.js:94
runOutsideAngular @ chunk-WZ4OXYRL.js:11122
(anonymous) @ chunk-WZ4OXYRL.js:20015
invoke @ polyfills-JWOJ23JA.js:295
onInvoke @ chunk-WZ4OXYRL.js:11187
invoke @ polyfills-JWOJ23JA.js:295
run @ polyfills-JWOJ23JA.js:94
(anonymous) @ polyfills-JWOJ23JA.js:1956
invokeTask @ polyfills-JWOJ23JA.js:321
onInvokeTask @ chunk-WZ4OXYRL.js:11176
invokeTask @ polyfills-JWOJ23JA.js:321
runTask @ polyfills-JWOJ23JA.js:131
drainMicroTaskQueue @ polyfills-JWOJ23JA.js:476
Promise.then (async)
nativeScheduleMicroTask @ polyfills-JWOJ23JA.js:456
scheduleMicroTask @ polyfills-JWOJ23JA.js:463
scheduleTask @ polyfills-JWOJ23JA.js:313
onScheduleTask @ polyfills-JWOJ23JA.js:223
scheduleTask @ polyfills-JWOJ23JA.js:306
scheduleTask @ polyfills-JWOJ23JA.js:166
scheduleMicroTask @ polyfills-JWOJ23JA.js:181
scheduleResolveOrReject @ polyfills-JWOJ23JA.js:1948
then @ polyfills-JWOJ23JA.js:2132
runInitializers @ chunk-WZ4OXYRL.js:19976
(anonymous) @ chunk-WZ4OXYRL.js:21873
_callAndReportToErrorHandler @ chunk-WZ4OXYRL.js:20012
(anonymous) @ chunk-WZ4OXYRL.js:21871
invoke @ polyfills-JWOJ23JA.js:295
onInvoke @ chunk-WZ4OXYRL.js:11187
invoke @ polyfills-JWOJ23JA.js:295
run @ polyfills-JWOJ23JA.js:94
run @ chunk-WZ4OXYRL.js:11078
internalCreateApplication @ chunk-WZ4OXYRL.js:21850
bootstrapApplication @ chunk-HY6RUIHQ.js:3195
(anonymous) @ main-LAGIADPR.js:6217


2nd stack trace:


main-LAGIADPR.js:6217 TypeError: serializedViews is not iterable
    at locateDehydratedViewsInContainer (chunk-WZ4OXYRL.js:10882:32)
    at populateDehydratedViewsInLContainerImpl (chunk-WZ4OXYRL.js:12202:42)
    at locateOrCreateAnchorNode (chunk-WZ4OXYRL.js:12212:8)
    at createContainerRef (chunk-WZ4OXYRL.js:12161:3)
    at injectViewContainerRef (chunk-WZ4OXYRL.js:11983:10)
    at lookupTokenUsingNodeInjector (chunk-WZ4OXYRL.js:6031:17)
    at getOrCreateInjectable (chunk-WZ4OXYRL.js:6008:19)
    at ɵɵdirectiveInject (chunk-WZ4OXYRL.js:8793:17)
    at ɵɵinject (chunk-WZ4OXYRL.js:3355:59)
    at inject (chunk-WZ4OXYRL.js:3364:10)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.7
Node: 20.10.0
Package Manager: yarn 4.2.2
OS: linux x64

Angular: 17.3.9
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.7
@angular-devkit/build-angular   17.3.7
@angular-devkit/core            17.3.7
@angular-devkit/schematics      17.3.7
@angular/cli                    17.3.7
@angular/ssr                    17.3.7
@schematics/angular             17.3.7
rxjs                            7.8.1
typescript                      5.2.2
webpack                         5.91.0
zone.js                         0.14.6

Anything else?

Appeared after I migrated to Angular 17 + ClientHydration + prerender enabled.

The following error happens only on

In production build on pages behind guards after a refresh (F5)
Frequency: Systematic.
Randomness: no
Details: redirecting to login does not work anymore.

In production build on pages of the same route: news/:slug (no guard).
Frequency: Systematic.
Randomness: yes
Result: No noticeable regression on page interactions.
Details: Concerning the case **In production build on pages of the same route: news/:slug **, i tried to debug it a little bit, as i thought it might be related to data for example. I emptied the template, the component itself leaving only an empty constructor + no imports other than the necessary @Injectable and stuff like that. Result stayed the same. Error appears on article A consistantly, but not article B (consistantly too).

The main error message is:

serializedViews is not iterable

In order to get a clearer message, i had to run

  yarn build && node dist/front/server/server.mjs

• modify "angular.json" to:

          "configurations": {
            "production": {
              "namedChunks": true,
              "optimization": false,
              ...
            }
          }

Any precisions on when this error usualy occurs would be very welcome. Thank you

[JoostK]

I'd be helpful if you could share a runnable reproduction.

[hhsissi]

I'd be helpful if you could share a runnable reproduction.

I tried to reproduce it but couldn't figure it out :(. I can share a live url where error occurs if you'd like to see it live.

[JoostK]

We'd likely need source code to determine what template is causing issues here. You may be able to remove parts of the app iteratively until the error no longer occurs, narrowing down which template is causing this.

[hhsissi]

We'd likely need source code to determine what template is causing issues here. You may be able to remove parts of the app iteratively until the error no longer occurs, narrowing down which template is causing this.

Thanks @JoostK , I removed contents of templates until i reached the main template: app.component.html.
Error disappears only once i remove this line:

  <router-outlet></router-outlet>

I'll try to check if this is not triggered by a mismatch in angular dependencies versions (typescript and rxjs) for the time being.

[hhsissi]

Okay, now i think i understand what's happening.

I started doing what you said about creating a new project with a reproduceable error, so i stripped everything around my article content and that's when i understood a part of my problem (at least for now):

1. yarn build && node dist/front/server/server.mjs
2. visit page http://localhost:4000/news/article-A
3. open console and there i see a new error understandable error:

GET http://localhost:4000/news/article-A 404 (Not Found)

4. Weirdly enough, i can still see the content of the page and my article A is really there.
5. I noticed that in my routes.txt file used for prerendering, that news wasn't listed in it.
6. I add the news route, and TADA: error disappeared.

I imagine that the server tries to find the static file, and if it's not there, it doesn't try to solve it dynamically and just throws a 404 ? Once the browser runs the code, it gets resolved dynamically because data is available in the backend.

Does that mean that by default prerender: true does not act in a hybrid way ? it's either there is a static file and if not, it just sends a 404 ?

[AndrewKushnir]

cc @alan-agius4 to see if this "page not found" behavior is known.

@hhsissi it'd still be helpful to have a repro where you see the original error (the "serializedViews is not iterable" one), so that we can improve the developer experience (e.g. provide a better error message and/or detect the problem earlier).

[alan-agius4]

@AndrewKushnir, no idea what is causing that 404. This might be related to your server configuration.

[pkozlowski-opensource]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template.