Ng Serve stops responding to file changes when editing ts/html files using Visual Studio 2022 (17.8.0)

[MichielNL83]

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

Angular 16

Description

Running Angular application using ng serve

When editing TS or HTML files using Visual Studio (v17.8.0) and saving,
the first change gets picked up and triggers a rebuild + reloading client(s).

All changes after that do not trigger a change.

Opening the same file in notepad++ and saving, does trigger a change.
Changes made in notepad++ do show in visual studio and vice versa

Minimal Reproduction

• ng serve application
• open component.html file and edit content (using visual studio)
• save file
• cli rebuilds application and browser refreshes
• edit content of same component.html file and save file
• cli does not respond to changes

Exception or Error

No response

Your Environment

Angular CLI: 17.0.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1700.2
@angular-devkit/build-angular     17.0.2
@angular-devkit/core              17.0.2
@angular-devkit/schematics        17.0.2
@angular/cdk                      17.0.0
@angular/cli                      17.0.2
@angular/flex-layout              15.0.0-beta.42
@angular/material                 17.0.0
@angular/material-luxon-adapter   17.0.0
@schematics/angular               17.0.2
rxjs                              7.8.1
typescript                        5.2.2
zone.js                           0.14.2

Anything else relevant?

Windows 11 Enterprise 22H2
Microsoft Visual Studio Enterprise 2022 (64-bit) - Current - Version 17.8.0

[dgp1130]

So this is a super weird one. Debugging with @clydin, we were able to reproduce and open Visual Studio and VSCode next to each other on the same project. We were actually able to get two changes rebuilt in Visual Studio before it stops rebuilding. However VSCode can continue to edit the same project and changes are immediately applied.

We also confirmed that Visual Studio was writing to the file system correctly and that the file is byte-for-byte identical between the two editors. We were suspecting this might be an encoding or line ending issue, but we can safely rule both of those out.

We found a couple references to the fact that Visual Studio is unique in that it doesn't modify files directly. Instead it writes them to a temporary directory and then moves them to the actual location. This can be observed as different file system events for file watchers and seems to be a common problem. This is likely the root cause of the problem, however exactly where the fix should be is still unclear.

• FileSystemWatcher does not raise events for files that are opened/changed in Visual Studio dotnet/runtime#17626
• https://developercommunity.visualstudio.com/t/saving-changes-does-not-trigger-watchers-saving-sa/209768#T-N495571

We also tried enabling polling, but this didn't help. The only workaround which solved the issue was to watch the project root directory entirely. As to why this solves the problem, I'm not entirely sure. Doing it is also a performance regression for Windows users not on Visual Studio.

We tried ng serve --verbose which lists out the file modifications detected to see exactly what event the project root picks up that is getting missed. However we only see modifications to the app.component.html file, nothing else. So we don't understand why this event requires watching the project root at all.

Obsolete workaround

WORKAROUND: You can force Angular CLI to watch the project root with the NG_BUILD_WATCH_ROOT environment variable.

For command prompt:

set NG_BUILD_WATCH_ROOT=1
ng serve

For PowerShell:

$env:NG_BUILD_WATCH_ROOT=1
ng serve

We'll need to do a little more investigation to figure out exactly what's going on here and what the proper fix is.

[MichielNL83]

Can confirm on my end that adding the 'NG_BUILD_WATCH_ROOT=1' environment variable indeed works as a workaround.

[dgp1130]

Just published v17.0.3 which updates Angular CLI to watch the project root by default. That should hopefully work around the problem automatically without requiring the environment variable.

We'll still want to do some more investigation here to find a more permanent fix.