ng serve 17 live reload only reloads on .ts file changes

[onwsk8r]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

The crux of the issue is that, when using ng serve, my app is not rebuilt correctly (or at all) unless I'm saving a .ts file. That is to say if I edit the HTML file I'm viewing in my browser to add or remove some content and then save the file, nothing changes in my browser. I have not tried ng build to see whether it considers HTML/style changes to necessitate rebuilding the app.

On to my specific problem! I'm hand-crafting some SVG (excited for @for), and I'm editing files with extensions like .html and .scss, as well as .ts. I can reproduce the problem on app.component.*, generated via ng new. When I edit a TS file, live reload works as expected. If you look at my "exception or error" output, you'll see the following series of events:

1. The initial build, which worked
2. Me editing and saving an HTML file (notice the comment), which did not actually rebuild anything (apparently) or change the content in my browser
3. Me changing an SCSS file, which did the same
4. Subsequent changes to HTML or SCSS files simply do nothing, as you can see. I made several changes such as adding and removing lines to both the HTML and SCSS files and saved them afterwards with no effect.

I suppose you could argue this is an issue with 3rd party software, not with Angular, but then again, isn't the whole point of Angular to provide a developer-ready framework? I contend that an app created with ng new should fully - not partially - support tasks such as editing HTML or SCSS files.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

❯ ng serve

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  25.46 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 108.26 kB

Application bundle generation complete. [0.988 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
   
// Now I'm going to edit an HTML file

Initial Chunk Files | Names | Raw Size
main.js             | main  | 25.31 kB | 

Unchanged output files: 2
Application bundle generation complete. [0.084 seconds]
Page reload sent to client(s).

// Now I'm going to edit an SCSS file

Initial Chunk Files | Names | Raw Size
main.js             | main  | 25.31 kB | 

Unchanged output files: 2
Application bundle generation complete. [0.067 seconds]
Page reload sent to client(s).

// And another HTML file change

// And another scss file change

Please provide the environment you discovered this bug in (run ng version)

❯ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.8
Node: 20.10.0
Package Manager: npm 10.2.3
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

[onwsk8r]

Hey team, turns out I had more time to dig into this than I thought, and sorry for the lack of detail.

Sometimes when I change a file I see this:

⠋ Changes detected. Rebuilding...
{
  "added": [],
  "modified": [],
  "removed": [
    "path/to/the/file.ts"
  ]

Other times I see tis:

⠋ Changes detected. Rebuilding...
{
  "added": [],
  "modified": [
    "/path/to/some/file.html"
  ],
  "removed": []

In both cases, I'm writing a file from an editor.

[alan-agius4]

I believe this should be fixed in the 17.1.0 which is currently in prerelease. Can you please verify by updating using the below command.

ng update @angular/cli@next

[onwsk8r]

Hey, sorry for the slow response! To make up for being slow, I tested a couple of extra scenarios:

1. Deleting and recreating the file very quickly works as expected
2. Formatting after writing (what vim calls BufPostWrite) works as expected
3. Truncating and replacing the content works as expected

I'm of the "you shouldn't need to refresh the page every 30 seconds" school of thought, but I've found that my convictions seem to slip when I'm writing SVG, which is what prompted this issue :) thank you so much!

PS - this is a new project for me and probably the first serious Angular I've written since about v12. The project is very data-driven, and in fact my SVG is for custom data visualizations. I think I actually shopped around for a bit before settling on Angular (again, like always), and now that I'm throwing 847kb of compressed JSON with mainly numeric values at it, I'm remembering why I started using AngularJS ten years ago. Keep up the great work!

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