{{ message }}
Repository navigation
hmr causes element disappear #59582
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
No
Description
After upgrading to 19.1, template change keeps causing strange behaviors:
- binding stops until I resize the browser window (variable binding with checkbox on the page for example)
- my change simply does not appear not even a total page reload until I restart ng server
- element disappear after any change happening on template ex. a nested component inside the template just disappears after I made tiny change on the template to trigger a hmr
I had to use no-hmr ng server --no-hmr to avoid this from happening.
So, it seems it's related to hmr.
Binding failure appears quite often on wsl2 but not appearing on Ubuntu 24 machine.
The element disappearing happens on both wsl2 and Linux.
Distributor ID: Ubuntu
Description: Ubuntu 24.04.1 LTS
Release: 24.04
Codename: noble
Angular CLI: 19.1.0
Node: 22.12.0
Package Manager: npm 10.9.0
OS: linux x64
Angular: 19.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.7
@angular-devkit/build-angular 19.1.0
@angular-devkit/core 19.1.0 (cli-only)
@angular-devkit/schematics 19.1.0
@angular/cdk 19.0.5
@schematics/angular 19.1.0
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
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)
Anything else?
No response
Activity
crisbeto commentedon Jan 17, 2025
Can you try updating to 19.1.1? I suspect this is related to #59562.
emnljs commentedon Jan 17, 2025
i am having the same issue with 19.1.1 using ionic angular
dw-0 commentedon Jan 17, 2025
@crisbeto I am having this issue with 19.1.1 still as well. Im not sure which info to provide that could help you. In my case im using an nx workspace. Disabling hmr solves the issue. Having hmr enabled, pretty much any change in a template or typescript file causes elements or styles to disappear or lazy loading not working, hence breaking navigation of my page. If you need any more specific info, please let me know and i try to provide it.
crisbeto commentedon Jan 17, 2025
It's hard to say what could causing it without looking at the code. Have you noticed this only in a specific component or everywhere. For reference, I'm thinking this might be the same root cause as #59559 and there the issue was visible also on a simplified component.
dw-0 commentedon Jan 17, 2025
In my case i first noticed it on a Syncfusion DataGrid component of medium complexity. After the first code change buttons and some styles of the table disappeared. Im not allowed to share the code due to company policies but it may be sufficient to grab the example code of the first example from here: https://helpej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items?cs-save-lang=1&cs-lang=ts
For example, i have a search field on my tables as well, and that was one of the elements that disappeard together with all other buttons of the toolbar element of that datagrid after i changed the header text of a column for example and hmr was triggered.
crisbeto commentedon Jan 17, 2025
Do you happen to be using the
BrowserAnimationsModulein your app?dw-0 commentedon Jan 17, 2025
@crisbeto Yes, i do.
crisbeto commentedon Jan 17, 2025
It's possible you may be hitting the issue fixed in #59574. Might be worth trying to replace
BrowserAnimationsModulewithNoopAnimationsModulejust to see if the issue goes away.dw-0 commentedon Jan 17, 2025
I switched from
BrowserAnimationsModuletoNoopAnimationsModuleas suggested, but i still face that issue.jusfeel commentedon Jan 18, 2025
After upgrading, all seem fixed on my Angular app on wsl2. (Not ionic Angular)
crisbeto commentedon Jan 20, 2025
We've released versions 19.1.2 of the framework and 19.1.3 of the CLI which include some HMR fixes. Does it resolve this issue?
hasokeric commentedon Jan 20, 2025
I wonder if this is related to #59632 because I have a component that has a global .scss and also it uses styles with
:hostinside the.component.tsand with HMR somehow the styles in the component, break. In addition I use tailwind css mixed with it.--no-hmr
With HMR
Notes
This one is basically one of those ngProjectAs custom slot components.
:hostand:host-contextbut even with that removed, no change.dw-0 commentedon Jan 21, 2025
@crisbeto i updated to the following versions:
In my case, this did sadly not solve the issue.
cagataycivici commentedon Jan 21, 2025
Still broken, PrimeNG development is halted now due to this.
hasokeric commentedon Jan 21, 2025
@crisbeto will PR #59644 fix this one as well?
crisbeto commentedon Jan 21, 2025
It's unclear since we don't have a way to reproduce this.
hasokeric commentedon Jan 21, 2025
ok I will wait for the PR and try again, if not I can make a small ngProjectAs example with a mixed global .scss, a style in the component what not.
msmallest commentedon Jan 21, 2025
@hasokeric the second and third points of the body of this issue I have experienced myself. For my own code where I observed this, they are addressed as of the PR. I also tested the reproduction you liked in the self-referencing 59632 issue and the PR changes fixed that repro as well.
If you want to test the PR yourself, I learned how to do it recently and it is kind of fun. It's basically just grabbing the
node_modules/@angularsubfolders from the PR and dropping them in.node_modules/@angularand say yes to all of the replace folder prompts.I just did that for 59632/59639/59640 addressed in the PR and they were fixed by these changes in my respective repos.
hasokeric commentedon Jan 22, 2025
@crisbeto , I tested the PR #59644 based on @msmallest suggestion, and it appears to have resolved issues in:
Great Work!
Result
hasokeric commentedon Jan 22, 2025
The only thing that I need to figure out is how to get HMR to not destroy stuff that you grab from a child and move into a parent container, since it doesnt re-run
AfterViewInit, probably need to look at different lifecycle hooks.But thats probably my lack of Angular Skill here making a Dialog Wrapper. Might just be a ElementRef vs ContentChild battle.
What happens if I modify my
dialog.component.scssthe dynamically added content created viathis._actionsContainer.nativeElement.appendChild(customActions);disappearscanberkardic commentedon Jan 23, 2025
Also I belive it affetcs the bundled & deployed application lifecycle.
In below when I first land into my project's landing page it's like that
PS : We're using a custom web component library
Whenever I reload the page it works as expected
hasokeric commentedon Jan 23, 2025
I am not sure if thats a limitation of it, or considered a bug. Should HMR be removing dynamically created DOM elements. @crisbeto thats the only thing I really have left as a HMR nusance.
Like if I add a
<p>Test</p>using nativeElement and add it to a<div>during runtime. After making a scss or html change the inserted<p>Test</p>would disappear.Which is fine, but might as well then reload the entire component, than to have it in a broken state, still reloading the component completely is still faster than full page reload.
msmallest commentedon Jan 23, 2025
@canberkardic can you provide a minimal reproduction of this web component issue? I wouldn't think that these changes would impact anything beyond serving locally with HMR.