angular-cli: CSS Problem on --prod build

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

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

Same issue with 1.7. Open Source = Spend more time tracking down other peoples errors… Quality control where?

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

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

Same here. Although "configurations": { "production": { "extractCss": false, still works on angular-cli 6.1.1, I’m wondering when this bug will get fixed.

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

It seems that the -prod parameter chooses the wrong order for the styles in .angular-cli.json.

Example:

{...
  "apps." [
      "style":[
        "... /node_modules/bootstrap/dist/css/bootstrap.css",
        "style.scss"        
       ]
    ]
}

In non -prod mode, the syles.scss overwrites the bootstrap.css (correct). In the -prod mode, just the other way around (wrong).

Hi!

I had the same issue with my angular-cli/material2 application. ng build worked great but when using ng build --prod no css was applied with no warnings whatsoever.

In my angular @Component’s i was using styles:[require('style.css')] After switching to styleUrlss:['style.css'] everything was fixed.

Maybe that helps!?

Had the same issue with Angular CLI: 8.1.0 and switching to "extractCss": false fixed it for now. But I think this issue should not be closed.

I’m using Angular: 6.0.0, I’ve same problem too.

In my scenario, I’ve a global style.css which contains this line @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Additionally ng serve --extract-css=false is not working anymore. It says Unknown option: '--extractCss'

> ng --version

Angular CLI: 6.0.0
Node: 8.11.3
OS: darwin x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Not sure if it’s the same issue, but in case this helps someone…

I noticed broken/missing CSS when I added --prod flag. After trying various suggestions in this thread I found a work around by using ng build --prod --aot=false, but a deeper investigation revealed that ng build --prod was displaying warnings (not errors) in console in the form of WARNING .......... at 6170:16. Ignoring. These were difficult for me to find in my source code without the filenames and line number, but eventually after resolving them build --prod seemed to work like a charm.

I guess the AOT compiler just throws out the CSS immediately after whatever it deems “invalid” which is confusing because it results in different (broken) CSS to the dev build, and without any errors, and the warning messages are not very helpful troubleshooting.

@lafama --extract-css=true/false did not fix it for me, I tried various commands and the one that made a difference was --aot This is some how causing a messup. So my current production command will have to be: ng serve --prod --aot=false

As above said, I fixed it by edit package.json."build": "npm run color-less && ng build --prod --build-optimizer --extract-css=false",.Can anyone explain me why it works?🤔

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.9
Node: 10.15.3
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.2.2
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Had the same issue with Angular CLI: 8.1.0 and switching to "extractCss": false fixed it for now. But I think this issue should not be closed.

Still have this issue in angular:

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@angular/pwa                      0.800.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Is possible that this can interfere? ->

  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }

Having the same problems as pretty much everyone above with my ng build --prod stripping away necessary SCSS styles for my app rendering it looking half-baked. Running Angular 6.1 and using @imports on the /src/styles.scss file for all of my global styles, all styles rendering fine without any errors when serving locally for dev. I used the workaround from @webdevan to build without AOT: ng build --prod --aot=false which solves my problem for now. Would like to use AOT on my ng builds though.

Guys come on. Fix this please! Its been almost an year since the issue was open.

Not directly related but in case someone lands here and has a similar issue:

I also had an issue where CSS was wrong when compiled with AOT and CLI > 1.6.3 However, my issue was related to :host-context and solved by @bgotink brilliant comment on https://github.com/angular/angular/issues/19199

TL:DR one must not combine multiple css selectors inside " :host-context(.selector-one .selector-two) {} " instead write it as " .selector-one .selector-two :host-context {} "

Hi @filipesilva

ng serve --aot is OK ng serve --aot --build-optimizer is OK

ng serve --aot --extract-css is KO ng serve --prod is KO

PS : I tested all the above commands also with the angular-cli 1.5.4 and angular 5.0.3 All was good with the angular-cli 1.4.9

So just to conclude :

• the --extract-css flag is broking something from version 1.5.0 ++

Hope this helps.

Hi @filipesilva @clydin Thank you for your reply and for the efforts that you’re doing for the community.

I fixed the problem with a workround and i will explain you how :

I have a component that encapsulates a component (a progress bar) from a third party library (ngx-bootstrap)

gaming.component.html

<progressbar [max]="100" [value]="progress">{{progress}}%</progressbar>

In the css part of my gaming component i override the native css of the progress bar to turn it pink :

gaming.component.css

>>> .progress-bar { background-color: #d6487e; height: 20px; }

In this configuration my ng serve is OK (the progress bar turns pink) but my ng serve --prod is KO (the progress bar stays blue as it’s native color).

After searching on the web i came out with a workaround :

gaming.component.css

:host ::ng-deep .progress-bar { background-color: #d6487e; height: 20px; }

So It turn out that when i changed the >>> by :host ::ng-deep in my css, i have the same result on my ng serve and my ng serve --prod (the progress bar turns pink).

I still believe that it’s an agular cli prod build bug because i have to have the same behavior on the simple serve and the serve with prod turned on. I hope this point you to a solid direction for a correction.

I’m trying hard to isolate the code and to setup an easy reproduction app for you guys. Don’t hesitate if you need more explanation.

Thx.

Having the same with "@angular/cli": "6.0.0". Can confirm that "extractCss": false resolves the problem. I was unable to track back which changes actually made the css processing faulty, since extractCss: true was working up until now.

Ok, I’ve figured it out at least for my case. See this commit.

In my more complex example I had a base styles object that was being spread into various style function objects to be DRY like so. style({ ...baseStyles, }).

Essentially AOT breaks the animation because it doesn’t spread the base styles into object passed to the style function. I was able to determine this by looking at the AOT output.

If you checkout that repo and switch between the last two commits with a prod build you will see the bug in action. Essentially it should switch between a red and blue square and never be green. If it’s green then you know the styles for the animation states are not being applied.

I now know a workaround although it’s less than ideal.

There is a similar problem to reproduce. NG-ZORRO/ng-zorro-antd/issues/2980

I’m sorry, but we can’t reproduce the problem following the instructions you provided. Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue. Short, explicit instructions make it much more likely we’ll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

I agree with @webdevan, my CSS was working fine when running locally, but then vanished when running a --prod build. For me, the solution was to look at the CSS which had been removed, figure out why it was invalid, and correct it.

In my case, I was including alpha transparency in hex format color codes which isn’t very widely supported. Changing it to rgba seemed to resolve the issue.

I saw no errors or warnings when building my application, the CSS was just missing.

I too had the same issue, and using ng serve --aot --build-optimizer instead of ng serve --aot --prod solved the issue.

@Deccoy yes, this issue is not present with 1.7.0-beta.1 (but I have others 😃

I have this issue since 1.6.4. Reverting to 1.6.3 works.