CSS Problem on --prod build

omahjoub commented 6 years ago

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-24-35

I have also a masonry layout that is good.

Step 2 :
```
ng serve --prod
```

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

bahrmichael commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

any updates on this?

phaeton2040 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.