Angular 16 SSR Injected CSS broken because of media=print

[albanx]

🐞 Bug report

What modules are related to this issue?

• builders
• common
• express-engine

Is this a regression?

Yes, the previous version in which this bug was not present was: 15.x

Description

Just updated my angular web app from 15 to 16.0.
After running the server side rendering I noticed that the CSS was broken.
After some extensive debugging found out that the injected stylesheets are being created with the wrong media type on the SSR only.

🔬 Minimal Reproduction

1. Create an angular app
2. Add SSR
3. run build SSR
4. run SSR with node
5. open in the browser your local server
   Live example here https://test1.homezone.al/properties/sale

The issue is clearly related to the change in this line: https://github.com/angular/universal/blob/main/modules/common/engine/src/engine.ts#L105

🔥 Exception or Error

CSS media print instead of ALL

🌍 Your Environment

Angular CLI: 16.0.1
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 16.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.1
@angular-devkit/build-angular   16.0.1
@angular-devkit/core            16.0.1
@angular-devkit/schematics      16.0.1
@nguniversal/builders           16.0.1
@nguniversal/express-engine     16.0.1
@schematics/angular             16.0.1
rxjs                            7.8.1
typescript                      5.0.4

[alan-agius4]

Hi @albanx, I am unable to replicate this problem.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[albanx]

I did a minimal repo to reproduce the issue using ng new , as I reported in the repro steps.

Here is the repo uploaded on github https://github.com/albanx/angular16-ssr-bug-css repro steps included.

Do note, this seems happening when you have more than 1 CSS file in Angular.json.
I had to write this script (on deployment time to SSR lambda) to workaround it:

// to remove once this issue has been fixed https://github.com/angular/universal/issues/3128
const ssrBugFix = () => {
  const options = {
    files: './ssr_lambda/browser/index.html',
    from: /media\=\"print\"/g,
    to: 'media="all"',
  };

  replace.sync(options);
}