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