Angular-cli: ng serve --aot not properly compiling changed css

Created on 18 Jul 2019  Β·  2Comments  Β·  Source: angular/angular-cli

🐞 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

ngtoolwebpack easy (hours) medium broken bufix

Most helpful comment

Thank you @alan-agius4 !

All 2 comments

Thank you @alan-agius4 !

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

Was this page helpful?
0 / 5 - 0 ratings