CSS Problem on --prod build

[omahjoub]

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

  

I have also a masonry layout that is good.

• Step 2 :

  ng serve --prod

  

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

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. 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.

[omahjoub]

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.

[filipesilva]

Yes it might be a problem in our CSS pipeline. It might also be related to AOT. Can you see if it happens with ng build --aot instead of --prod?

[omahjoub]

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.

[check1234]

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!?

[clydin]

I'm having trouble replicating this. I tried with both CLI 1.5.4 & 1.6.0-rc.0 and added ngx-bootstrap's progress bar with the styles shown above to a new project. All without issue. Is there any chance a minimal reproduction could be put together to further analyze the issue?

[Deccoy]

Same problem here :-/

[Deccoy]

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).

[Deccoy]

Seems to be fixed in latest beta release.

[dgsqrs]

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

[Deccoy]

Can you solve the problem by updating to 1.7.0-beta.1?

[dgsqrs]

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

[dotlouis]

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

[dgsqrs]

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

[dotlouis]

Yes as a workaround but it should be fixed nonetheless

[haidaraM]

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

[haidaraM]

I think @Deccoy is right. Just checked the generated styles file.

[somupadhyay]

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

[paulpottertasd]

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

[marouaneterai]

Same issue with Angular 5 & Angular CLI 1.7.3 I solved the problem by importing my bootstrap and font-awesome on the top of my style.css. I know that it isn't the perfect solution but I am not dissatisfied. Thank's to @dgsqrs

[lafama]

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

[worthy7]

Just encountered this. Bump, fix please.

[uluzox]

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 {} "

[worthy7]

@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

[webdevan]

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.

[simon-lock]

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.

[nzhul]

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

[sadedil]

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

[lafama]

Hi, for angular 6 the option has been moved to the angular.json file "configurations": { "production": { "extractCss": false,

[csgchristian]

On Angular 1.7.4, --extract-css=false was not working. Downgraded to 1.6.3 and production bug disappeared.

[nimatrazmjo]

Same problem with angular 6 using webpack

[FinalVersion]

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

[simon-co]

This is a still present and odd bug, seemingly random elements of CSS being thrown out. I edited my missing CSS (which was valid and not throwing errors) so that it was on a single line. This fixed the problem. Why this fixed the problem I have no idea, I don't even know why I tried it.

[alan-agius4]

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.

[serkon]

Workaround fix: i have extracted scss code which has problem on component's scss. Then have pasted it to /src/styles.scss file. It worked.

[nthompson777]

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.

[elvince]

I think this the same issue as #9475 What do you need to repro this?

Try using bootstrap in scss and 2 custom css file. Import the first css - Update the primary color to pink then booststrap scss then the 2nd css - Update the primary color to Blakc

Check the final output of the primary color in development mode (ng serve) Then build ng --build.

You will see that the output is not the same.

------------------------------------------ ng --version ----------------- Angular CLI: 6.1.5 Node: 8.11.3 OS: win32 x64 Angular: 6.1.9 ... animations, common, compiler, core, forms, http ... language-service, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.7.5 @angular-devkit/build-angular 0.7.5 @angular-devkit/build-optimizer 0.7.5 @angular-devkit/build-webpack 0.7.5 @angular-devkit/core 0.7.5 @angular-devkit/schematics 0.7.5 @angular/cdk 6.4.7 @angular/cli 6.1.5 @angular/compiler-cli 6.1.7 @angular/material 6.4.7 @ngtools/webpack 6.1.5 @schematics/angular 0.7.5 @schematics/update 0.7.5 rxjs 6.3.3 typescript 2.9.2 webpack 4.9.2

[midsever]

Seems that the workaround at this point is to include all your global styles in src/styles.scss rather than builder options in angular.json.

[BerekHalfhand]

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

[Sioxas]

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

[adamduren]

I have created a reproduction for this issue. Here is the github repo.

To see it working without the prod flag: npm start To see it working with the prod flag: npm run build -- --prod; cd www; npx local-web-server -p 4200

Also here is a screen capture showing the correct behavior on the left and the incorrect behavior on the right.

[adamduren]

@alan-agius4 can this be reopened since we have a way to demonstrate the issue that can hopefully provide a path forward?

[jadhemar-MD]

fixed this on angular 7, found one css file on the project : app.component.css, once renamed to app.component.scss the build is ok.

[adamduren]

@jadhemar-MD I don't believe that to be the case for my reproduction above. If you send a PR that fixes the issue I'll humbly admit I'm wrong and buy you a beer. 😄

[jadhemar-MD]

hi @adamduren, would be hard to send a PR for this :), what can i say is that we got the white page trouble because angular tried to load the old removed css (type MIME error in console). In our case the issue come from a forgotten css file in a component, once we moved this one from css to scss, i can confirm that fix the trouble. Maybe my build config can help (angular 7): "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "serviceWorker": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }

Thanks to @Deccoy 's post who show me the way https://github.com/angular/angular-cli/issues/8577#issuecomment-359198319

[adamduren]

@jadhemar-MD I don't think this applies in my case. Thanks for tips though!

[adamduren]

I did some work to remove Ionic to rule that out as a factor and the issue without Ionic still occurs.

[adamduren]

Here are the results of my testing. I tried multiple variations of options by modifying angular.json. The only time for me when it consistently worked as expected was with aot: false. buildOptimizer is included as a column as you cannot keep buildOptimizer: true when aot: false. I'm guessing when setting via CLI it takes care of this for you.

So in my case it seems that AOT is the issue.

Base Options:

{
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
}

* means no change from original

aot	buildOptimizer	extractCss	Result
*	*	*	FAIL
*	false	*	FAIL
*	*	false	FAIL
false	false	*	PASS
false	false	false	PASS

[adamduren]

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.

[adamduren]

Considering creating a separate issue since after testing it's possible these two are unrelated.