angular-cli: Hot reload freezes if mistake in template file is corrected

I did some investigation and was able to reproduce consistently with the following steps:

1. npm init @angular@17.0.1 ng-new && cd ng-new
2. ng serve
3. Introduce a syntax error into app.component.html.
   • I added <div>Hello, world!</div (no >).
4. App rebuilds automatically and issues a syntax error.
5. Fix the syntax error by adding >.
6. App automatically rebuilds and reloads the page successfully.
7. The CLI is now hung, any further edits to app.component.html no longer trigger a rebuild.

A few more notes:

• This seems specific to component templates. I was not able to reproduce this by introducing TypeScript typing errors as opposed to template syntax errors.
• I was not able to reproduce this behavior by editing index.html (although it doesn’t seem to be watched at all which is likely a separate bug).
• You can edit the template in step 3. as much as you want and it will rebuild correctly. If you change the syntax error, it will correctly update the error message. However, once the template is fixed, the CLI is hung and no changes will trigger a rebuild.
• Weirdly, fixing the syntax error does trigger a successful rebuild (6.), only changes after that rebuild are ignored.

Digging down this looks like a Windows pathing issue. After every build we check if any files were added or removed from the compilation and update the file watcher to match. To do this we compare the files we were watching before a build with the files we found during the build (relevant code). Inspecting this state I found:

Due to the different separators, the CLI thinks we stopped watching app.component.html and removes it from the watched file set. Seems like we just need to make sure our paths are normalized so they are added/removed from the watched set correctly. The bad paths are likely coming from some of the tools we’re invoking (TypeScript, esbuild, etc.). So we’ll want to normalize those to a consistent structure when we receive them.

@clydin landed a potential fix in https://github.com/angular/angular-cli/pull/26393. I confirmed that this appears to fix the issue in my testing.

It’s unfortunately pretty late on a Friday right now, but I can follow up with a patch release Monday morning. This should be in the 17.0.2 release.

Hi! I can confirm the same behaviour when getting html error, then fixing it, then getting stuck in reloading.

17.0.2 should be out now with the fix. Please try it out and let us know if you’re still seeing any challenges with the ng serve experience.

@dgp1130 Hey Douglas, can confirm it’s fixed 😃

This might be related to #26325 which has just been fixed and released (haven’t tried it yet).

I can confirm that it is now working correctly in 17.0.1

I can also confirm that the same things happens with @angular-devkit/build-angular:browser-esbuild

The same for me

I am using Windows 11 Home 22H2 and “builder”: “@angular-devkit/build-angular:application”. I’d say it’s pretty frequent - once every 5-6 file saves and mainly I’ve been fiddling with html files.

NG_BUILD_DEBUG_PERF=1 doesn’t log as it gets stuck totally and only “Reloading client(s)” is there. Will try disabling parallelization later.

Update: happens on both scenarios when there’s some error and error html message is rendered, once making html template correct it loads up but hot reload stops working. Websocket connection is still in pending status while browsing network tab.

So far, so good for me as well/

Same here, happens random after 2 - 7 reloads:

“builder”: “@angular-devkit/build-angular:application”,

Angular CLI: 17.0.0 Node: 20.9.0 Package Manager: npm 10.2.3 OS: win32 x64 W11 22H2 Chrome 119