HMR with external component styles + jit mode shows previous update on save

[mattlewis92]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When trying out the new HMR in angular 19, I found an issue when using jit mode to serve (i.e. "aot": false). HMR of styles is working, but on the first change nothing happens, and then on subsequent changes, the last change takes effect. The same issue is not present with aot mode (we are unable to use aot in our application as incremental rebuilds take ~2 minutes each time). This does not appear to affect inline component <style> tags and only for styles added via the styleUrl property.

Minimal Reproduction

1. Create a new angular application with latest rc of angular 19
2. Set "aot": false in the angular.json
3. Change src/app/app.component.html to <h1>Hello world!</h1>
4. Change src/app/app.component.scss to h1 { color: red; } and observe nothing happens
5. Change src/app/app.component.scss to h1 { color: blue; } and observe the h1 tag is now red instead of blue. Any future style updates now show the previous update.
   

Exception or Error

Your Environment

Angular CLI: 19.0.0-rc.2
Node: 20.15.0
Package Manager: npm 10.7.0
OS: darwin arm64

Angular: 19.0.0-rc.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0-rc.2
@angular-devkit/build-angular   19.0.0-rc.2
@angular-devkit/core            19.0.0-rc.2
@angular-devkit/schematics      19.0.0-rc.2
@angular/cli                    19.0.0-rc.2
@schematics/angular             19.0.0-rc.2
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

No response

[clydin]

Thank you for the report.
Unfortunately, the component HMR capabilities require the AOT compiler for build-time analysis and code generation.
In this issue's case, part of the style HMR logic is unintentionally enabled for JIT. This will be corrected in the next release.

In regards to the performance concerns with AOT, are there any particular aspects of a rebuild that you can identify that are causing 2+ minute times? Being able to use AOT would be the ideal state and any areas that can be improved here would likely benefit all Angular projects.

[mattlewis92]

In regards to the performance concerns with AOT, are there any particular aspects of a rebuild that you can identify that are causing 2+ minute times? Being able to use AOT would be the ideal state and any areas that can be improved here would likely benefit all Angular projects.

I believe the performance issues are specifically inside of the aot compiler / typescript itself (running raw ngc --watch is just as slow). We did give the angular team access to our codebase a few years back, and a bunch of perf improvements were landed on the aot compiler (angular/angular#44731) + in typescript itself (microsoft/TypeScript#47472), but I guess things have regressed again (webpack ended up becoming the biggest bottleneck so we ended up rolling our own local dev server and haven't been using the CLI for local development for a while now, I am just now trying to get us back to using it as HMR is extremely exciting to us!). We'd be happy to grant someone from the Angular team access to our codebase again to do the same kind of perf profiling again.

[dgp1130]

I think we can close this since #28886 landed?

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