NG_HMR_TEMPLATES not working

[cesco69]

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

Don't known / other

Is this a regression?

Yes

Description

I tried the template HMR on a new project created with Angular v19.0.2. As I read some days ago into another issue related to template HMR, there was a problem that's now fixed in the v19.0.1 by this commit... but it isn't working at all: the CLI prints a message saying "Component update sent to client(s).", an event is sent in the Angular websocket but nothing happens.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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

Angular CLI: 19.0.2
Node: 20.13.1
Package Manager: pnpm 9.1.2
OS: win32 x64

Angular: 19.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.2 (cli-only)
@angular-devkit/build-angular   19.0.2
@angular-devkit/core            19.0.2 (cli-only)
@angular-devkit/schematics      19.0.2 (cli-only)
@angular/cli                    19.0.2
@schematics/angular             19.0.2 (cli-only)
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else?

No response

[JeanMeche]

Hi, I just created a new project with ng new, enabled the flag with NG_HMR_TEMPLATES=1, edited the app.component.html could observe the HMR.

We're going to need some more details/a repro for this to be actionable to us. Thank you.

[juane1000]

Same issue. Updated to 19.0.1 after a clean project of v19 and HMR templates simply does not update the view. Tried changing on app.component and a nested route component.

EDIT: Just created a new project with the latest cli installed. Verified that installed deps are 19.0.1. Ran with the HMR flag in the command. Tested using the AppComponent template and continue to get the "Component update sent to client(s)" in the terminal but nothing updates in the browser view.

For added clarification: I do see the "Experimental support for component template hot replacement has been enabled via the "NG_HMR_TEMPLATE" environment variable." message so I know that it took the flag.

[zygarios]

I also have a problem with HMR dor template. Normal ng serve is working, but with prefix "NG_HMR_TEMPLATES=1 ng serve" i get an error:

[draylegend]

Same issue. Additionally the serve command crashes without zone.js polyfill.

Repo

bun start

[henrikgrubbe]

I have the same issue as juane1000

[spock123]

Ditto here - had to disable this feature.
FWIW - pnpm mono repo, ng19.0.1 on all projects.

[crisbeto]

This is likely a CLI issue. Moving into the appropriate repo.

[cesco69]

Are there any updates on this?

[taylorhutchison]

This must be a Windows thing. I cannot get template HMR to work on my Windows machine, but the same code works on my Mac.

[jmerro]

Appears to be only an issue on windows.
One of the issues I've found a fix and has to do with unix vs windows file paths,

case ResultKind.ComponentUpdate:
        assert(serverOptions.hmr, 'Component updates are only supported with HMR enabled.');
        assert(
          server,
          'Builder must provide an initial full build before component update results.',
        );

        for (const componentUpdate of result.updates) {
          if (componentUpdate.type === 'template') {
            templateUpdates.set(componentUpdate.id, componentUpdate.content);
            server.ws.send('angular:component-update', {
              id: componentUpdate.id,
              timestamp: Date.now(),
            });
          }
        }
        context.logger.info('Component update sent to client(s).');
        continue;

componentUpdate.id is using "\" (%5C) from the path where the browser is expecting "/" (%2F)

Fixing this (I just did a simple replaceAll) makes HMR work if you manually refresh the page where it wouldn't before.

The other problem seems to be the client isn't calling the @ng/component middleware when receiving WS update, again related to the file path

[taylorhutchison]

Seems like it is related to windows vs POSIX path separators and a fix could be coming based on this commit:
8875998

[spock123]

@taylorhutchison We're having this issue on MacOS (ARM)

[taylorhutchison]

@spock123 have you tried version 19.0.5 of the angular cli? It just came out a day ago and includes a fix for template HMR. I'm curious if it fixes your issue. I don't have an ARM Mac to test on.

[draylegend]

@taylorhutchison updated packages in my repo and it works fine for html files (app.component.html). Thank you!

[zygarios]

Unfortunately, HMR for templates works only on the Bash terminal but not on PowerShell, which I use daily. Does anyone know what might be the issue?
Bash:

Powershell:

[zygarios]

I need to add something off-topic. HMR for styles and templates is something I've been waiting for a long time, and I have to admit it works brilliantly. For me, it's definitely the most important feature introduced in Angular 19, and I'm surprised it didn't get as much attention as other features. The productivity of writing code has increased significantly, especially when it comes to styling or adding content to templates, such as in step 3 of a stepper dialog. Until now, working on something like this required going through the same path a million times to see the changes. Thank you for this, Angular Team, truly! Cheers! ☺️

[spock123]

@taylorhutchison I can confirm it now works for templates on my Mac (ARM)

wonderful and magical!

Now we just need the tailwind class changes to also trigger updates in templates. But there's an open issue that might soon have a fix also

[jmerro]

Unfortunately, HMR for templates works only on the Bash terminal but not on PowerShell, which I use daily. Does anyone know what might be the issue?
Bash:

Powershell:

Assign the environment variable to the process like using something likeset NG_HMR_TEMPLATES=1 enter, then ng serve should work.

Mind you that this will only be needed until template hmr becomes the default.

[JeanMeche]

Is anyone still experiencing the issue ?

[spock123]

@JeanMeche I think it's solved for this case. I think it still won't update when changing classes for a html element but that's for another github issue that's already open I think

[alan-agius4]

Thanks for reporting this issue. Please update to the most recent version to resolve the problem.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

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