SSR returns ERR_CONTENT_LENGTH_MISMATCH with a specific style

[ocombe]

Command

serve

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v18.x

Description

A very specific style in the template of a component triggers an error ERR_CONTENT_LENGTH_MISMATCH in chrome when trying to serve it with SSR. This only happens when trying to serve it with the built prod bundle, and only in Chrome (works fine in Firefox).

I narrowed it down to the following style:

<style>
  div::before {
    content: "\2022 \2022 \2022";
  }
</style>

Minimal Reproduction

Create a new application with Angular CLI, chose SCSS styles, ennable SSR, use server routing (dev preview) (not sure if it's relevant, but probably).

Go to src/app/app.component.html, replace the content with:

<style>
  div::before {
    content: "\2022 \2022 \2022";
  }
</style>

content

<router-outlet></router-outlet>

Run npm run build and then npm run serve:ssr:<project name>, go to http://localhost:4000/ in Chrome and the page doesn't load, you'll get the error GET http://localhost:4000/ net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) in the console.

Exception or Error

GET http://localhost:4000/ net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 19.0.0-rc.1
Node: 20.12.2
Package Manager: npm 10.9.0
OS: win32 x64

Angular: 19.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0-rc.1
@angular-devkit/build-angular   19.0.0-rc.1
@angular-devkit/core            19.0.0-rc.1
@angular-devkit/schematics      19.0.0-rc.1
@schematics/angular             19.0.0-rc.1
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

This works fine in Firefox & this only happens when you try to serve the files built with SSR for production.

[JeanMeche]

This has also been reported by #28832.

[ocombe]

Yes, my bad !