Hot reload freezes if mistake in template file is corrected

[radekjakubowski]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

While playing with Angular in dev mode I get stuck frequently at

Rerunning app with 'ng serve' resolves but it's annoying.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Application bundle generation complete. [0.074 seconds]
Reloading client(s)...

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.0
Node: v18.13.0

Anything else?

No response

[JoostK]

Could you provide some additional information about your setup:

• What operating system is being used?
• Which CLI builder is being used? @angular-devkit/build-angular:browser-esbuild or @angular-devkit/build-angular:application

Some more general questions: how often does this occur? Could you identify which changes result in this behavior, or is it seemingly at random?

Other than that, some things you could try:

1. set the NG_BUILD_DEBUG_PERF=1 environment variable to log profiling data, which may reveal where things get stuck.
2. set the NG_BUILD_PARALLEL_TS=0 environment variable to disable parallelization in certain areas.

[radekjakubowski]

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.

[kimanderssonm3cs]

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

[Alecto]

The same for me

[scurk1415]

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

[ChrisPienta1137]

I also experienced this.
Windows 11
Angular CLI 17.0.0
Node 20.9.0
@angular-devkit/build-angular:application

[Ameerusa86]

Same for me, I have to keep stopping and re run the projects, is there any fix, ty

[reduckted]

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

[radekjakubowski]

I tried it out for dependencies listed below:

And it doesn't work sadly... I'd bump my node to current version to see if it resolves issue (currently v18.13.0)

After bumping up node to v20.9.0 issue still occurs.

[iqmeta]

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

[kimanderssonm3cs]

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

[radekjakubowski]

Dunno why it got closed when me and @iqmeta still have same issue on 17.0.1...
@alan-agius4

[dgp1130]

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

1. npm init @[email protected] 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:

Time	Path
Watched	C:\\Users\\Doug\\Source\\ng-new\\src\\app\\app.component.html
Built	C:/Users/Doug/Source/ng-new/src/app/app.component.html

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.

[kimanderssonm3cs]

Yeah sorry, it seems to be working when .ts files are fixed, but as you say above, html files and other files are still breaking.
the global styles.scss does emit changes until it receives an error, after that it stops being watched.

[ssougnez]

I think I have the same issue.

In my case, I'm not using ng serve but ng build --watch and I often have the case that fixing an issue in a template does not trigger the incremental build:

For example, here, I updated a regular variable into a signal but the compiler does not see it:

⠦ Changes detected. Rebuilding...X [ERROR] NG7: This comparison appears to be unintentional because the types 'WritableSignal<boolean>' and 'boolean' have no overlap. [plugin angular-compiler]

    src/app/branch/components/branch-homepage-update-form/branch-homepage-update-form.component.html:28:21:
      28 │           [loading]="updating === true"
         ╵                      ~~~~~~~~~~~~~~~~~

  Error occurs in the template of component BranchHomepageUpdateFormComponent.

    src/app/branch/components/branch-homepage-update-form/branch-homepage-update-form.component.ts:23:15:
      23 │   templateUrl: './branch-homepage-update-form.component.html',

If I stop the build and launch it again it works.
Note that it is not limited to "fixing an issue".
Sometimes, it just stops watching templates even when there is no error.
I'm using node 20.9.0, the CLI 17.0.1 and the application builder.

[dgp1130]

@clydin landed a potential fix in #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.

[radekjakubowski]

@dgp1130 great news! Amazing work with v17 so far <3

[dgp1130]

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.

[radekjakubowski]

@dgp1130
Hey Douglas, can confirm it's fixed :)

[ssougnez]

So far, so good for me as well/

[geosh2000]

still happening:

package.json:

{
"name": "gg-erp17",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.4",
"@angular/cdk": "^17.0.1",
"@angular/common": "^17.0.4",
"@angular/compiler": "^17.0.4",
"@angular/core": "^17.0.4",
"@angular/forms": "^17.0.4",
"@angular/material": "^17.0.1",
"@angular/platform-browser": "^17.0.4",
"@angular/platform-browser-dynamic": "^17.0.4",
"@angular/router": "^17.0.4",
"rxjs": "~7.8.0",
"tslib": "^2.6.2",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.3",
"@angular/cli": "^17.0.3",
"@angular/compiler-cli": "^17.0.4",
"@types/jasmine": "~5.1.0",
"autoprefixer": "^10.4.16",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"typescript": "~5.2.2"
}
}

[ManciDRaffy]

Same here, bug still occurs, but for me, it's every time I change something in HTML, so not only on fixing a bug

[alan-agius4]

For those users who are still reporting file changes not triggering rebuilds, can you check if applying the changes in #26468 fixes the issue?

This can be done by installing the snapshot builds which is currently not on NPM

npm i https://github.com/angular/angular-devkit-build-angular-builds#cf42e6ade83e480cd29b8eba43f8daaf76367b4c --save-dev --force

[HCenggel]

I have the default configuration. After using ng serve to start the project, this problem will also occur.

[muhamedkarajic]

To me it seems like its cause I was using something instead of app-root. Another thing which I had quit a few issues was that I was using direct import ... from 'src/app/...' which seems now not anymore to work, so you have to use '../../..' etc.

[nejat-njonjo]

What I have figured is that, if one of your files has issues, Angular doesn't throw an error, which leads to the Browser just keeping on loading. I hope this gets fixed soon.

E.g You are current_file < import_in_2 < import_in_3

So if the import_in_3 file has errors, can lead to such behaviours.
If you are using SSR, make sure you specify the platform using PlatformId

[tarzasai]

Same here, bug still occurs, but for me, it's every time I change something in HTML, so not only on fixing a bug

Me too and while it was happening only on html errors in 17.0.0, with 17.0.2 I have to re-serve after every change, even if the html is correct.

[devmadou]

Hi, guys.
First, thanks for the great work on v17.

I am experiencing the same issue even on 17.0.5.
I noticed the error occurred on a custom scss file I created where I am defining a custom theme:

  $custom-light-theme: mat.define-light-theme((
      color: (
          primary: $web-ng-primary,
          accent: $web-ng-accent,  // Omit the accent color and the same freezing behavior will happen
      ),
  ));

I am able to reproduce the issue when purposely introducing an error when calling the built-in mat.define-light-theme function without the accent palette.
When I correct the error, the file change seems detected but no build is triggered and the page remains stuck in that error state.

[angular-automatic-lock-bot]

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