💰 0 USDT Bounty - "Loss of app rebuild on app change using ng 17 wi.."

Bounty

Loss of app rebuild on app change using ng 17 with esbuild+vite created by @SoA432 on Pomelo Bounties

Summary

Solve the loss of app rebuild on app change using ng 17 with esbuild+vite. Debug the issue and come up with a solution to fix the bug related to the file watcher not triggering app rebuilds. Test the solution with the demo app, using Playwright, to ensure that the app rebuilds when expected.

Apply

https://bounties.pomelo.io/141bec443ba3

Original Issue

https://github.com/angular/angular-cli/issues/26686

Title

Loss of app rebuild on app change using ng 17 with esbuild+vite

Body

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

App rebuild on code change stops working.

Minimal Reproduction

Clone the temp-5 tag from the edumserrano/playwright-adventures repo
After cloning the above repo, go to /demos/code-coverage-with-monocart-reporter/ and run npm i to restore the npm packages, followed by npx playwright install to install the Playwright browsers.
Run npm start to start the app.
Run npx playwright test --ui to launch the Playwright UI mode.
Make a change to the title variable of the /demos/code-coverage-with-monocart-reporter/src/app/app.component.ts and notice on the output of the Playwright UI that the app is rebuild. For instance, change the title to code-coverage-with-monocart-reporter-1.
Run the screenshot test on all 3 browsers. The tests should now fail and flag the difference as expected.
Make another change to the title variable of the /demos/code-coverage-with-monocart-reporter/src/app/app.component.ts and notice on the output of the Playwright UI that the app is NOT rebuilt. For instance, change the title to code-coverage-with-monocart-reporter-2.

You can see the above behaviour demoed in this recording:

[!NOTE] Sometimes you might have to run the screenshot tests more than once, in this recorded demo the app rebuild only stopped on the second failed run.

https://github.com/angular/angular-cli/assets/15857357/63a0762e-c55b-4d80-85fa-a0e01ab8f73f

Exception or Error

No response

Your Environment

Angular CLI: 17.0.5
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64
Angular: 17.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@angular/cdk                    17.0.2
@angular/material               17.0.2
@schematics/angular             17.0.5
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

The fact that the app isn't being rebuild not only means that my tests don't behave as expected but also that I won't see the app updates on the browser.
Note that the reproduction steps use Playwright as a way to reproduce the bug. The issue isn't Playwright related. I think the problem might be related with the fact that when running the Playwright tests, when they fail, several files are being generated inside the ./tests directory and that somehow is breaking the file watcher. See this comment.
I can't replicate this issue if I use the prerelease version of Angular CLI, version 17.1.0-next.2, by doing:
```
ng update @angular/cli@next
```
Using the demo app, BEFORE updating to @angular/cli@next, ANY file I add/delete to the ./tests folder was triggering an app rebuild and AFTER the update that no longer happens. For instance, adding an image that is not used by the app to the ./tests folder would result in this output:
```
No output file changes.
```

Unchanged output files: 3 Application bundle generation complete. [0.068 seconds]


- I initially thought this was related with `Playwright` so I first opened the issue at https://github.com/microsoft/playwright/issues/28632.
- I then thought this was related with #26633 and [I left a comment](https://github.com/angular/angular-cli/issues/26633#issuecomment-1858037467) there.

## Base Reward
**0.0500 USDT**

## Note
For technical discussion use the original issue. This issue is for tracking the bounty application and implementation progress.

pomelo-io / bounties-issues-dev