esbuild: Application rebuilding after files wrongfully were detected as changed

[wartab]

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

Sometimes, files will be detected as changed (I assume by chokidar), even if they haven't actually changed. This causes the application to rebuild.

This is not the case when not using esbuild.

Those file changes can be caused by multiple things, like git or WebStorm randomly deciding to writing files to disk that haven't been changed.

Minimal Reproduction

run ng serve

One way of replicating this behaviour in WebStorm is to press Ctrl + S even if the file hasn't changed.

Exception or Error

No response

Your Environment

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


Angular CLI: 16.0.1
Node: 16.18.0
Package Manager: npm 9.6.4
OS: win32 x64

Angular: 16.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.1
@angular-devkit/build-angular   16.0.1
@angular-devkit/core            16.0.1
@angular-devkit/schematics      16.0.1
@schematics/angular             16.0.1
rxjs                            7.8.1
typescript                      5.0.4

Anything else relevant?

No response

[alan-agius4]

@wartab, this should not be any different from the default webpack based builder. When a file is saved, even if the contents did not change a rebuild is triggered.

[wartab]

I just tested it again. I can confirm what I reported. The behaviour is different with esbuild.

[wartab]

I'm not sure how to help out with this. It's pretty easy to replicate on my end, so if you can tell me how to proceed, let me know.

[clydin]

As mentioned, the default Webpack-based builder also will rebuild if a file is altered but does not have any content changes.

The following steps can be used to demonstrate this:

1. Execute ng build --watch. Output:

✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.bb3905875abf73da.js      | main          | 123.30 kB |                36.98 kB
polyfills.17229f07c3c9bed8.js | polyfills     |  32.99 kB |                10.67 kB
runtime.979e5903ddb9e524.js   | runtime       | 898 bytes |               509 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 157.17 kB |                48.14 kB

Build at: 2023-05-15T16:15:38.575Z - Hash: 4c850a06340d6159 - Time: 9746ms

2. In another console execute touch src/main.ts. Output:

✔ Browser application bundle generation complete.
✔ Index html generation complete.

4 unchanged chunks

Build at: 2023-05-15T16:15:55.232Z - Hash: 4c850a06340d6159 - Time: 423ms

As shown above, a rebuild is performed even though no input content is actually changed.

[wartab]

It seems like I have been mislead by what the root cause of this is. I took the time to investigate what is happening and managed to find that this was all a side effect of having a JetBrains IDE open while doing my tests. All operations I described were either directly caused by the IDE or made the IDE react in a way I didn't expect.

Specifically the example I mentioned:
Pressing Ctrl + S in an unchanged file doesn't change the file I'm trying to save. However, it modifies the file in "./.idea/workspace.xml". Several events cause this file to be touched by the IDE.

So the issue is more that the esbuild version watches more/other files than the webpack version.

I can see that the naive way of not watching directories starting with a dot wouldn't work, as Webpack also watches those folders once those files are imported in source code.

[psarno]

I can confirm I am seeing this also, but it seems totally random 😕

I had VS Code opened and cleared the terminal so I could keep an eye on it.

All I did was click on my ".gitignore" file, just click it not change it, and I got "Changes detected. Rebuilding ...".

Then I cleared the terminal and tried clicking other files, couldn't repro it ... until I clicked angular.json. Then it rebuilt again.

package.json? No rebuild. Click some other files and then go back to package.json? Rebuild.

If I clear the terminal and try clicking these files again to repro, it won't rebuild.

No modifications were made to these files at all, it simply displayed them in the editor and this caused esbuild to trigger another rebuild.

Is there anything special about these particular files that I'm missing? But it gets stranger ...

Often it will rebuild when I switch away from, and then back to, the VS Code window. Sometimes. But not reproducable. It happened just now when I switched back to it, but when I tried it again it didn't rebuild the second time. Then, later in the day, I switched back to it and it rebuilt the project ... twice. One right after the other.

Next, I went to clear the terminal again, so I clicked the three dots to get to the "Clear Terminal" window.

Just clicking the three dots again caused it to rebuild. Just the opening of the menu.

I'd almost think it's seeing some external program making some changes to these files but it is happening clearly as a result of actions I am taking. The console will be clear and exactly the moment I select a file, rebuild. The exact moment I open a menu, rebuild. That can't be a coincidence.

[d9j]

it's quite annoying problem. sometimes it seems randomly rebuilding while viewing front end in the browser. thus triggering reload in the browser as well! Editor is vs code. seems like it changes cache or some config but angular esbuild treats it as file change in the project.