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 angular/angular#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.

[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 #8577 (comment)

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

[bahrmichael]

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

@adamduren Can you tell us about the workaround? I still have the problem with

Angular CLI: 7.3.9
Node: 10.12.0
OS: darwin x64
Angular: 7.2.15

[vishranti5]

does anyone got solution for this problem with angulat cli 7.3.9 version

In my case, i created custom element (microapp) using angular elements, and inside base application i declared css variables, inside microapp i used them, basic motive is to pass styles from base app to micro app using css variables. It is working fine on my local.
But i hosted microapp on azure and inside base application i provided hosted microapp's path.microapp is rendering properly but styles are not passing from base appication to micro application using css variables.

does anyone has any idea about same.

[vishranti5]

any updates on this?

[phaeton2040]

It turned out to be an interesting case.
I removed an option "preserveWhitespaces" from my tsconfig.app.json it fixed my problem with style differences between AOT build and development.

[vishranti5]

I used angular CLI, default configuration of Tsconfig doesnt have preserveWhitespaces in it. If i add this field into tsconfig, still it is not working

[riscie]

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.

[Alessandroinfo]

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

[kerwin-ly]

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

[dkro]

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.

[eclipticrick]

The bug still persists in Angular v8.2.5 (@angular/cli: 8.3.4)
Using "extractCss": false in angular.json OR adding the --extract-css=false flag to the ng build --prod command does seem to solve the problem.

[rolzing]

This doesnot work.

in angular.json

I fix this issue change the import css into main.scss instead of angular.json

@import '~bootstrap/dist/css/bootstrap.css';

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}