Changes made to inline styles are not always reflected to browser with v12.

[bogacg]

🐞 Bug report

Command

• serve

Is this a regression?

I'm not sure, I've been more of a "styles should go to a separate file" type of guy till recently.

Description

When styles are inlined in component, changes made during ng serve are not consistently reflected to browser.

Only first change to inline style gets reflected or changes made to multiple properties/lines (even that one fails from time to time), but not single ones.

Check the provided repo below:

In app/core/pages/home.component.ts trying to change background color of main class and see that it wont be changed on the browser (after first change)

🔬 Minimal Reproduction

Here is an example repo:

https://github.com/bogacg/FantasyCarDealer

🌍 Your Environment

Angular CLI: 12.0.1
Node: 16.1.0
Package Manager: npm 7.13.0
OS: win32 x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

I've tested on Chrome & Firefox and same result should be seen on both.

This issue is opened after Originally posted by @alan-agius4 in #20882 (comment)

[angular-automatic-lock-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.}