Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
thillmfg opened this issue Jul 18, 2019 · 2 comments · Fixed by #15144
Closed

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

thillmfg opened this issue Jul 18, 2019 · 2 comments · Fixed by #15144

Comments

@thillmfg
Copy link

🐞 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

@thillmfg
Copy link
Author

Thank you @alan-agius4 !

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.