-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ng Serve stops responding to file changes when editing ts/html files using Visual Studio 2022 (17.8.0) #26437
Comments
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.
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 Obsolete workaroundWORKAROUND: You can force Angular CLI to watch the project root with the 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. |
Can confirm on my end that adding the 'NG_BUILD_WATCH_ROOT=1' environment variable indeed works as a workaround. |
…on Windows with application builder When using the `application` or `browser-esbuild` builder in watch mode on Windows, the project root will now be watched by default. This provides a workaround for users of Visual Studio which uses a file save mechanism that causes the watch mode to not correctly trigger. By watching the entire project root, this problem is avoided. However, this may result in additional rebuilds due to changes of unrelated files in the project root. This behavior can be disabled using the environment variable `NG_BUILD_WATCH_ROOT=0`. On non-Windows platforms, disabled is the default. Addresses angular#26437
…on Windows with application builder When using the `application` or `browser-esbuild` builder in watch mode on Windows, the project root will now be watched by default. This provides a workaround for users of Visual Studio which uses a file save mechanism that causes the watch mode to not correctly trigger. By watching the entire project root, this problem is avoided. However, this may result in additional rebuilds due to changes of unrelated files in the project root. This behavior can be disabled using the environment variable `NG_BUILD_WATCH_ROOT=0`. On non-Windows platforms, disabled is the default. Addresses #26437
…on Windows with application builder When using the `application` or `browser-esbuild` builder in watch mode on Windows, the project root will now be watched by default. This provides a workaround for users of Visual Studio which uses a file save mechanism that causes the watch mode to not correctly trigger. By watching the entire project root, this problem is avoided. However, this may result in additional rebuilds due to changes of unrelated files in the project root. This behavior can be disabled using the environment variable `NG_BUILD_WATCH_ROOT=0`. On non-Windows platforms, disabled is the default. Addresses #26437 (cherry picked from commit 96b5b10)
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. |
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` The former does not fire for all events example ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` The former does not fire for all events example ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` The former does not fire for all events example ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` The former does not fire for all events example ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on(`raw`)` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
Hi @MichielNL83, Would you mind to verify if applying the changes in #26468 fixes the issue? Steps to apply the update:
|
Yes, these changes fix the issue. |
@MichielNL83, thanks for the checking and confirming that the proposed change fixes the issue for you. Much appreciated. |
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes #26437 (cherry picked from commit 1725b91)
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes #26437
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes angular#26437 (cherry picked from commit 1725b91)
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes #26437 (cherry picked from commit 1725b91)
…when using certain IDEs This commit, fixes a file watching issue where file changes events are not triggered when using IDEs like Visual Studio (not VS Code). The main changes to solve the issue are; ## Replace `watcher.on('all')` with `watcher.on('raw')` Using `watcher.on('all')` does not capture some of events fired when using Visual studio and this does not happen all the time, but only after a file has been changed 3 or more times. ``` watcher.on('raw') Change 1 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 2 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' Change 3 rename | 'C:/../src/app/app.component.css' rename | 'C:/../src/app/app.component.css' change | 'C:/../src/app/app.component.css' watcher.on('all') Change 1 change | 'C:\\..\\src\\app\\app.component.css' Change 2 unlink | 'C:\\..\\src\\app\\app.component.css' Change 3 ... (Nothing) ``` ## Handle `rename` events Some IDEs will fire a rename event instead of unlink/changed when a file is modified} Closes #26437 (cherry picked from commit 1725b91) (cherry picked from commit 4bcee31)
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Command
serve
Is this a regression?
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
Exception or Error
No response
Your Environment
Anything else relevant?
Windows 11 Enterprise 22H2
Microsoft Visual Studio Enterprise 2022 (64-bit) - Current - Version 17.8.0
The text was updated successfully, but these errors were encountered: