Better Approach for Styles for SSR (Angular Universal) #21471

naveedahmed1 · 2018-01-11T13:46:42Z

I'm submitting a...


[x ] Feature request

What is the current behavior?

When using Angular Material in Angular app with Server Side Rendering, the styles for Angular Material are added to the head tag of each page of the website.

For example in my case the below styles are added in each page around (14kb):

What is the expected behavior?

It would be better if these styles could be added to an external style sheet.

Environment


Angular CLI: 1.6.3
Node: 8.9.1
OS: win32 x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.0.4
@angular/cli: 1.6.3
@angular/flex-layout: 2.0.0-beta.12-b9745c6
@angular/material-moment-adapter: 5.0.4
@angular/material: 5.0.4
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.6.2
webpack: 3.10.0


Browser:
- [x ] Chrome (desktop) version XX
- [ x] Chrome (Android) version XX
- [ x] Chrome (iOS) version XX
- [ x] Firefox version XX
- [ x] Safari (desktop) version XX
- [ x] Safari (iOS) version XX
- [ x] IE version XX
- [ x] Edge version XX

The text was updated successfully, but these errors were encountered:

Toxicable · 2018-01-12T04:53:47Z

If they were added as an external style sheet then there would be a delay when the app is booting where it wouldn't have any styles and might be very jarring for users as the style sheet downloads

CaerusKaru · 2018-01-12T06:48:38Z

I agree with @Toxicable, not to mention that every request would trigger a write/read from the filesystem, which would then have to handle caching requests, etc.

If this behavior is desirable to you, you can very well implement all of this yourself taking on the speed tradeoffs/extra overhead. The SSR generated styles have the ng-transition class added to them; you can intercept the HTML before it's returned to the user, cut out the styles and put them in your own stylesheet, and append the stylesheet link back to the HTML. This would not be ideal for most users, however, and probably shouldn't be implemented in platform-server.

naveedahmed1 · 2018-02-04T16:31:22Z

@CaerusKaru what about the no SSR styling approach, similar to what we would have in flex-layout angular/flex-layout#373 (comment)?

CaerusKaru · 2018-02-05T01:27:34Z

@naveedahmed1 I don't think it's necessary. All you have to do is follow my suggestion above to get your desired behavior. It should not be the responsibility of platform-server because it's too specific a use-case and, as you can tell from lack of attention to this issue, not a widely needed use-case.

trotyl · 2018-02-08T14:30:52Z

Relates to #14914, if styles could be compiled to separate files, should work on both client and server rendering.

waterplea · 2018-12-19T09:42:31Z

you can intercept the HTML before it's returned to the user...

@CaerusKaru could you advice how can I intercept it? I need to polyfill CSS variables for IE11 and currently I have to wait until we're in the browser, although technically, I have all the tools to do it, I just need to know when all SSR generated styles are in place and how to get my function to be called.

Komar73 · 2020-03-11T13:19:58Z

@waterplea found a solution? Also faced with such a problem due to IE11 and CSS variables.

waterplea · 2020-03-17T12:43:14Z

@Komar73 I ended up concluding IE users suffer much worse inconveniences than flashing styles :(

angular-robot · 2021-06-05T14:23:02Z

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

angular-robot · 2021-06-26T14:02:40Z

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

angular-automatic-lock-bot · 2022-08-18T16:10:00Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alexeagle added the area: server label Jan 11, 2018

ngbot bot added this to the needsTriage milestone Feb 26, 2018

vikerman added feature freq2: medium severity2: inconvenient labels Dec 4, 2018

ngbot bot modified the milestones: needsTriage, Backlog Dec 4, 2018

jelbourn added P4 and removed severity2: inconvenient labels Oct 1, 2020

angular-robot bot added the feature: votes required label Jun 5, 2021

angular-robot bot added the feature: insufficient votes label Jun 26, 2021

jessicajaniuk closed this as not planned Jul 18, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Better Approach for Styles for SSR (Angular Universal) #21471

Better Approach for Styles for SSR (Angular Universal) #21471

naveedahmed1 commented Jan 11, 2018

Toxicable commented Jan 12, 2018

CaerusKaru commented Jan 12, 2018

naveedahmed1 commented Feb 4, 2018

CaerusKaru commented Feb 5, 2018

trotyl commented Feb 8, 2018

waterplea commented Dec 19, 2018

Komar73 commented Mar 11, 2020

waterplea commented Mar 17, 2020

angular-robot bot commented Jun 5, 2021

angular-robot bot commented Jun 26, 2021

angular-automatic-lock-bot bot commented Aug 18, 2022

Better Approach for Styles for SSR (Angular Universal) #21471

Better Approach for Styles for SSR (Angular Universal) #21471

Comments

naveedahmed1 commented Jan 11, 2018

I'm submitting a...

What is the current behavior?

What is the expected behavior?

Environment

Toxicable commented Jan 12, 2018

CaerusKaru commented Jan 12, 2018

naveedahmed1 commented Feb 4, 2018

CaerusKaru commented Feb 5, 2018

trotyl commented Feb 8, 2018

waterplea commented Dec 19, 2018

Komar73 commented Mar 11, 2020

waterplea commented Mar 17, 2020

angular-robot bot commented Jun 5, 2021

angular-robot bot commented Jun 26, 2021

angular-automatic-lock-bot bot commented Aug 18, 2022