Solvedangular cli CSS Problem on --prod build

Versions

Angular CLI: 1.5.3
Node: 9.2.0
OS: linux x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.3
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.3
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

  • Step 1 :
ng serve

capture d ecran de 2017-11-21 19-23-37

capture d ecran de 2017-11-21 19-24-35

I have also a masonry layout that is good.

  • Step 2 :
ng serve --prod

capture d ecran de 2017-11-21 19-36-30

capture d ecran de 2017-11-21 19-37-04

My Masonry layout is also broken (hard to demonstrate sorry!) but i think all is related !

Observed behavior

- My progress bar turns blue!
- My masonry layout is broken!
- No errors anywhere(cli console, navigator console...) but the css is broken with a prod build!

Desired behavior

- My progress bar stays pink!
- My masonry layout stays good!
- Or At least log an error somewhere

Mention any other details that might be useful (optional)

- The --prod build is broking somthing in the css.
- I observed this since angular cli 1.5.0
- All was good with angular cli 1.4.9
52 Answers

✔️Accepted Answer

I have the same issue with CSS ordering in production bundle.
I worked around it by adding --extract-css=false to my build command

Other Answers:

I manually move all the styles from the angular-cli styles array into style.scss with imports in the correct order and It worked

Why is the issue closed? The bug still persists in Angular 7, like seriously, it's about time to address it.

Same issue here when I build with a production target $ ng build --env dev --target production. No problem with $ ng build --env dev --target development

Angular CLI: 1.6.8
Node: 9.2.0
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.3.2
webpack: 3.10.0

The issue is fixed with : --extract-css=false

This is still and issue in Angular 5 & Angular CLI 1.7.3
--extract-css=false fixes the issue.

More Issues: