Skip to content

ng serve --aot not properly compiling changed css #15143

Closed
@thillmfg

Description

@thillmfg

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler 8.1.2

Is this a regression?

Yes, the previous version in which this bug was not present was 7.2.0. Haven't tested 7.3.x or 8.0.x

Description

When running ng serve with aot enabled, any changes to .css files require two compilations to have the changes reflected in the browser. Bug can also be reproduced when "aot": true is added to angular.json configuration, so I don't think this is related to the CLI package.
This does not affect .html or .ts files, changes to these files are reflected in a single compilation with aot enabled.

🔬 Minimal Reproduction

https://github.com/thillmfg/ng8aotcssbug

  1. run ng serve --aot=true
  2. uncomment line 2 of src/app/app.component.css
  3. save to trigger compilation
  4. the h1 element which reads "Welcome to eightaotbug!" will remain in black text.
  5. add a newline to the app.component.css file and save again to trigger another compilation
  6. the h1 element will now correctly display in red text

🔥 Exception or Error

CSS changes require two change/save/compilation steps to be reflected in the browser.

🌍 Your Environment

Angular Version:


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

Angular CLI: 8.1.2
Node: 11.14.0
OS: win32 x64
Angular: 8.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant?

Tested using Chrome 75 on Windows 10 x64

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions