Build ignores component styles properties #10111
Description
Versions
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.7.3
Node: 8.10.0
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router
@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
Repro steps
given the following component:
@component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
-- logic doesn't matter here - it happand if any other app component
export class someComponent implements OnInit {
constructor(
) { }
ngOnInit() {
}
}
with the following some.component.html:
<div class="bgrGrey" id="greyBgr">
...
</div>
and the some.component.css file:
.bgrGrey {
background-color: #efefef69;
border: 1px solid #80808038;
border-radius: 3px;
}
- Step 1 - run ng serve and watch output
- Step 2 - run ng serve --prod and watch output
- Step 3 - compare between the outputs: dev vs prod.
Observed behavior
ng serve output - OK - the border is grey and the style is complete:
ng serve --prod - Not OK - the border is black and the class is not fully loaded as shown bellow:
Desired behavior
div's border should be grey (#80808038) and the class properties should be fully loaded both dev and prod.
Mention any other details that might be useful (optional)
tried as well:
ng build --prod- with the same behavior - missing css properties Not OKng build --no-aot- the component output style was OK (complete)- changing style to
border: 1px solid red;result was OK (complete)
mention that its not something about logic or specific component or event the selected color- i checked with other component, without logic, and another color - all with the same results - difference between dev and prod.