Server Side Rendering Error

[shanieMoonlight]

Current Behavior

I've set up Server Side Rendering using the procedure described here: https://nx.dev/packages/angular/generators/setup-ssr.
Everything seems to be set up properly and the code compiles .

Compiled successfully.
** Angular Universal Live Development Server is listening on http://localhost:4200/, open your browser on http://localhost:4200/ **
Angular is running in development mode.

When I open it in the browser I get a TypeError (document.documentElement.setAttribute is not a function).
The browser just shows a print out of the stacktrace.

This happens with all my applications.
I have generated new applications (using generate -> application ) and added nothing else to make sure it wasn't any of my library code causing the error, but the error still occurs.

I have created a brand new workspace and it seems to work, so it's probably due to something in this workspace but I don't know what.
It would take me a long time to recreate it with all the libs and secondary entry points, so I'm hoping there is some way around it.

Expected Behavior

I expected the app to prerendered and served.

GitHub Repo

No response

Steps to Reproduce

1. Set up SSR for a project.
2. Serve the project in Development mode (nx run ssr-test:serve-ssr:development)
3. Open the browser at http://localhost:4200/

Nx Report

TypeError: document.documentElement.setAttribute is not a function
at createDocument (./node_modules/@nguniversal/common/node_modules/critters/dist/critters.mjs:517:30)
at (./node_modules/@nguniversal/common/node_modules/critters/dist/critters.mjs:1119:22)
at Generator.next ()
at asyncGeneratorStep (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
at _next (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:1)
at executor (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:1)
at ZoneAwarePromise (./node_modules/zone.js/dist/zone-node.js:1268:25)
at (./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:19:1)
at process (./node_modules/@nguniversal/common/node_modules/critters/dist/critters.mjs:1143:19)
at (./node_modules/@nguniversal/common/fesm2022/tools.mjs:138:40)
Angular is running in development mode.

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[leosvelperez]

Thanks for reporting this!

Unfortunately, we need a way to reproduce this so we can help. As you mentioned, it can't be reproduced with new workspaces, so we can't see what's wrong and could be related to your specific setup/environment. Please provide a repo where the issue can be reproduced or at least some detailed reproduction steps so we can troubleshoot the issue.

[KeithGillette]

This may be unrelated, but upon updating an nx@16.1.4† workspace to Angular 16.1.2, nx build fails for the Angular project target with the same document.documentElement.setAttribute is not a function (✖ Index html generation failed). The nx build succeeds with Angular 16.0.6 and earlier.

†We are stuck at nx@16.1.4 due to issue #17070.

[leosvelperez]

@KeithGillette Angular 16.1 is still not officially supported by Nx so issues can be expected. We're adding support for it on #17155 which has taken longer than expected due to Cypress not supporting Angular 16.1.

[leosvelperez]

@shanieMoonlight this seems to be an issue with a transitive dependency from the @angular-devkit/build-angular package angular/angular-cli#25419.

Looking through the comments in that issue, it seems to be caused by conflicting versions of the domhandler package being installed. In @angular-devkit/build-angular@16.1.0, the critters dependency was updated to a newer version that depends on that package. This comment angular/angular-cli#25419 (comment) mentions a workaround you can try.

I'm closing this issue since it's not caused by Nx. Please follow the linked issue in the Angular CLI repo for updates.

[shanieMoonlight]

Ok, I'll check it out.
Thanks.

[EliotBrown]

@shanieMoonlight this seems to be an issue with a transitive dependency from the @angular-devkit/build-angular package angular/angular-cli#25419.

Looking through the comments in that issue, it seems to be caused by conflicting versions of the domhandler package being installed. In @angular-devkit/build-angular@16.1.0, the critters dependency was updated to a newer version that depends on that package. This comment angular/angular-cli#25419 (comment) mentions a workaround you can try.

I'm closing this issue since it's not caused by Nx. Please follow the linked issue in the Angular CLI repo for updates.

Thanks! I had the same issue, installing domhandler separately fixed the problem.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.