{{ message }}
Repository navigation
HMR Ionic Angular live reload not working (ViewEncapsulation.ShadowDom) #59588
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
When using Ionic and Angular, during ionic serve, changes on the code does not trigger live reload. Also, some instances render white page removing all elements on save.
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.1.1
Node: 20.17.0
Package Manager: npm 10.8.2
OS: darwin arm64
Angular: 19.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1901.1
@angular-devkit/build-angular 19.1.1
@angular-devkit/core 19.1.1
@angular-devkit/schematics 19.1.1
@schematics/angular 19.1.1
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
Anything else?
No response
Activity
alan-agius4 commentedon Jan 17, 2025
This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?
You can read here why this is needed. A good way to make a minimal repro is to create a new app via
ng new repro-appand adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.This might be related to your directory structure so its really important to get an accurate repro to diagnose this.
emnljs commentedon Jan 17, 2025
Oh, yes definitely @alan-agius4. Here's a link you can clone: https://github.com/emnljs/no-live-reload
cd in the project then,
either live reload will not work or you will see a white page
FloppyNotFound commentedon Jan 17, 2025
I'm seeing a very similar behavior in our codebase, but we are not using Ionic, but Angular Material, so I don't think it's Ionic-specific.
Using ng version 19.1.0, I haven't noticed the issue in previous ng19.0.x-versions.
Workaround:
Disabling HMR fixes the issue (ng serve --no-hmr).
alan-agius4 commentedon Jan 17, 2025
@FloppyNotFound, could you please update to version 19.1.1 and confirm if it resolves your issue? This version addresses a known problem that was fixed and released earlier yesterday. For details, see: https://github.com/angular/angular/releases/tag/19.1.1.
alan-agius4 commentedon Jan 17, 2025
It seems that this issue is related to the use of
ViewEncapsulation.ShadowDomin one of the parent components where the change was made.As a workaround you can disable HMR, but using
--no-hmr.[-]Ionic Angular live reload not working[/-][+]Ionic Angular live reload not working (ViewEncapsulation.ShadowDom[/+][-]Ionic Angular live reload not working (ViewEncapsulation.ShadowDom[/-][+]Ionic Angular live reload not working (ViewEncapsulation.ShadowDom)[/+][-]Ionic Angular live reload not working (ViewEncapsulation.ShadowDom)[/-][+]HMR Ionic Angular live reload not working (ViewEncapsulation.ShadowDom)[/+]2 remaining items
FloppyNotFound commentedon Jan 17, 2025
unfortunately, this doesn't resolve the issue in my project, but I also cannot reproduce it in a newly created one, so I guess I'll keep looking 🤷♂️
fix(core): handle shadow DOM encapsulated component with HMR (#59597)
fix(core): handle shadow DOM encapsulated component with HMR (angular…
emnljs commentedon Jan 20, 2025
upgrading to version 19.1.3 works just like before. no need for
--no-hmrfix(core): handle shadow DOM encapsulated component with HMR (angular…
angular-automatic-lock-bot commentedon Feb 20, 2025
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.