styles.css not included inline in server render

I’m submitting a …

- [ ] bug report <!-- Please search GitHub for a similar issue or PR before submitting -->
- [ x] feature request
- [ ] Support request => Please do not submit support request here, instead see https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question

What modules are related to this Issue?

- [ ] aspnetcore-engine
- [ ] common
- [ x] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Current behavior?

The CSS declared in styles.css is included in the client bundle, but it is not inlined into the server bundle the way component styles are.

Expected behavior?

Any CSS in the styles.css should be (optionally?) inlined in the server rendered html and transitioned out when the client loads, the way other component CSS does.

Minimal reproduction with instructions

1. Clone this repo
2. Add any CSS to styles.css that should apply anywhere. Eg. body { color: pink; }
3. Open any server rendered route and view the html that is generated
4. Note that the CSS rule you added does not appear inlined in the HTML, it only appears once the client bundle is loaded.

Environment:

@nguniversal versions

• aspnetcore-engine:
• common:
• express-engine:
• hapi-engine:
• module-map-ngfactory-loader:

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->

Other information (optional)

My application has a lot of base styles defined in styles.css and it looks really bad before the transition to the client application when these styles are not available in the server view.

[fluidsonic]

I ran into the same issue but found a different workaround.

Forcing Angular to extract the global styles into their own files and loading them using <link rel="stylesheet"> correctly loads them in both cases, with and without SSR.

Set extractCss to true in build/options in angular.json.

Is there any documentation for extractCss?

[ErazerBrecht]

@vikerman We have the exact same problem as the ‘original problem’. The problem is that the styles are not ‘loaded’ by the SSR application

In our case:

            "styles": [
              "node_modules/typeface-montserrat/index.css",
              "node_modules/typeface-open-sans/index.css",
              "node_modules/typeface-roboto-mono/index.css",
              "node_modules/ngx-toastr/toastr.css",
              "shared/styles.scss",
              "projects/public/src/styles.scss"
            ],

And in FF this sometimes results in a flash. I never noticed this (I don’t really use FF) and I always thought this was a limitation by Angular Universal. But when digging deeper I found out that it’s indeed the global styles that aren’t loaded.

I can share our production url: https://www.intigriti.com/companies´

where you clearly see this when checking the raw html returned by SSR. (Lot of Times New Roman, non styles navbar, … -> All defined in our global styles)

Is there a recommend workaround?

EDIT: The workaround above works 😉 A played a bit around and now have a balanced ‘index.html’ (not all styling but most of it that’s important on that page)

Sincerely, Brecht And thanks in advance!