I'm submitting a...

[x] Bug report 

Current behavior

@page css rule doesn't work if the rule is placed in a component, however, it will work if it's placed in the global styles.css file

Expected behavior

@page in a component style should not be ignored

Minimal reproduction of the problem with instructions

ng new myproject
place @page {margin-top: 50%;} in app.component.scss
npm start
visit localhost and attempt to print the page and in the print preview the margin is not applied.

Place the same css in style.scss and the print preview will reflect the @pagemargin rule

What is the motivation / use case for changing the behavior?

I'd like to have specific @page css rules per component

Environment

@angular/core: ~7.0.0-rc.0
@angular/cli: ~7.0.0-rc.1

Browser:
- [x] Chrome (desktop): Version 69.0.3497.100 (Official Build) (64-bit)
 
For Tooling issues:
- Node version: v8.11.2
- Platform:  osx 10.13.6

Other :

I have found an old issue from 2016 #11860 stating the same problem, a fix was made and merged but I didn't file this issue as a regression because I can't confirm that it worked at that time and it was a long time ago.