Skip to content
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

Closed
1 task done
MichielNL83 opened this issue Nov 20, 2023 · 7 comments · Fixed by #26468
Closed
1 task done

Comments

@MichielNL83
Copy link

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
Copy link
Collaborator

dgp1130 commented Nov 21, 2023

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

@alan-agius4 alan-agius4 added the needs: investigation Requires some digging to determine if action is needed label Nov 21, 2023
@MichielNL83
Copy link
Author

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

clydin added a commit to clydin/angular-cli that referenced this issue Nov 21, 2023
…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
clydin added a commit that referenced this issue Nov 21, 2023
…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
clydin added a commit that referenced this issue Nov 21, 2023
…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)
@dgp1130
Copy link
Collaborator

dgp1130 commented Nov 22, 2023

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.

@alan-agius4 alan-agius4 self-assigned this Nov 23, 2023
@alan-agius4 alan-agius4 added severity3: broken freq1: low Only reported by a handful of users who observe it rarely and removed needs: investigation Requires some digging to determine if action is needed labels Nov 23, 2023
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
@alan-agius4
Copy link
Collaborator

Hi @MichielNL83,

Would you mind to verify if applying the changes in #26468 fixes the issue?

Steps to apply the update:

@MichielNL83
Copy link
Author

@alan-agius4 ,

Yes, these changes fix the issue.

@alan-agius4
Copy link
Collaborator

@MichielNL83, thanks for the checking and confirming that the proposed change fixes the issue for you. Much appreciated.

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit that referenced this issue Nov 23, 2023
…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)
alan-agius4 added a commit that referenced this issue Nov 23, 2023
…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
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 30, 2023
…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)
alan-agius4 added a commit that referenced this issue Dec 1, 2023
…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)
alan-agius4 added a commit that referenced this issue Dec 1, 2023
…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)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants