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