Angular-cli: Needs to save and build two times to save changes in style file.

[Kaspazza]

🐞 Bug report

Command (mark with an x)

- [x ] new
- [x ] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, in the previous version this bug was not present.

Description

When you save scss file, and cli automatically rebuild the changes doesn't apply and you have to save file again for it to correctly work. I guess it's caused by not deleting all virtual files for styles on change.
This issue came back after fix of #15453 and it was once solved in #15143.

🔬 Minimal Reproduction

1. ng s --aot
2. make changes in scss file
3. save
   4.it reloads and changes are not applied
4. save once again
5. it rebuilds and now it shows changes
   

   🌍 Your Environment

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.9
@angular-devkit/build-angular     0.803.9
@angular-devkit/build-optimizer   0.803.9
@angular-devkit/build-webpack     0.803.9
@angular-devkit/core              8.3.9
@angular-devkit/schematics        8.3.9
@angular/cli                      8.3.9
@ngtools/webpack                  8.3.9
@schematics/angular               8.3.9
@schematics/update                0.803.9
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.41.1

Anything else relevant?

[Adelaiten]

This is frequent problem for me as well, whilst in angular 7 I had to only rebuild project once again and it would work, now after upgrading it to angular 8 sometimes I need to rebuild few items before it work.

[anth-git]

I'm facing the same problem. Basically I need to save (rebuild) twice after each change in scss file to be sure that this change is reflected in the application.

To demonstrate it, I made small change in the file action-button.component.scss, and logged CLI output (ng serve --aot --verbose). Below are the only lines from the output that differ.

After the first compilation it says "Compiled successfully", but the change is not reflected in the app:

39  main.js  7.23 MiB       main             [big]  main
40  main.js.map  2.46 MiB       main                    main
52  chunk {main} main.js, main.js.map (main) 4.19 MiB ={runtime}= ={vendor}= [initial]
5547    [./src/app/modules/shared/components/action-button/action-button.component.scss.shim.ngstyle.js] 12.4 KiB {main}
42875   [39m: Compiled successfully.

After second compilation (without any change in file, just saved it once again) it says "WARNING in Emitted no files", but change is correctly applied this time:

39  main.js  7.23 MiB       main  [emitted]  [big]  main
40  main.js.map  2.46 MiB       main  [emitted]         main
52  chunk {main} main.js, main.js.map (main) 4.19 MiB ={runtime}= ={vendor}= [initial] [rendered]
5547    [./src/app/modules/shared/components/action-button/action-button.component.scss.shim.ngstyle.js] 12.4 KiB {main} [built]
42876   WARNING in Emitted no files.
42878   [39m: Compiled with warnings.

[anth-git]

I prepared sample project to demonstrate this behaviour. It seems that problem is only with the Ahead-of-Time compilation. It occurs every time, on various computers, so I'm baffled that no more people complain about this.

https://github.com/anth-git/bug15863

Steps to reproduce:

1. yarn
2. ng serve --aot
3. Open localhost:4300 in Chrome
4. Change font-size in _home.component.scss_ from 10px to 80px
5. Save the file

Result:

1. Font should be changed but it isn't
2. Only saving file for the second time reflects changes in the browser
3. Serving using JIT works fine

[cedx]

Same issue here, using AOT compilation. My environment:

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.13
@angular-devkit/build-angular     0.803.13
@angular-devkit/build-optimizer   0.803.13
@angular-devkit/build-webpack     0.803.13
@angular-devkit/core              8.3.13
@angular-devkit/schematics        8.3.13
@angular/cdk                      8.2.3
@angular/cli                      8.3.13
@ngtools/webpack                  8.3.13
@schematics/angular               8.3.13
@schematics/update                0.803.13
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

[wstaszewski]

I have the same issue.. After upgrading to Angular 8 it is necessary to rebuild the project to reflect the new changes. And the problem shows up only when using --aot compilation. For JIT it works fine.

[IgorKurkov]

Same on angular 8. As a temp solution ng serve --aot false work as should, but if compare with angular 7 build speed - angular 8 uses more RAM and processor time to build/hot-rebuild in JIT.

Angular CLI: 8.3.17
Node: 10.15.3
OS: win32 x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
@nguniversal/express-engine                8.1.1       
@nguniversal/module-map-ngfactory-loader   8.1.1       
@schematics/angular                        8.3.17      
@schematics/update                         0.803.17    
rxjs                                       6.4.0       
typescript                                 3.5.3       
webpack                                    4.39.2

[filipesilva]

I think https://github.com/angular/angular-cli/pull/16068 should fix this.

The reason our tests didn't catch it earlier was because there was a bug and it turned out the rebuild tests didn't run for View Engine (the default compiler for Angular version 8).

The problem proper was that resource dependencies (the thing that lists the files that the virtual files depend on) weren't being properly computed on windows.

[angular-automatic-lock-bot[bot]]

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