I am facing an issue. I just upgraded my ionic angular to 7.2 and I created a project with standalone components and I ran ionic serve. Then I tried to change something within a template and the change is just not appearing in the browser. I have to run ionic serve again for the browser to react. It’s a just created project, I haven’t change nothing.
There was a while since I made a Ionic project, so maybe I missed something like a --watch option or something like that (I have tried that one), but nothing happens.
I just created another project and it works… but only when I change something in the app.component.html.
If I change something in home.page.html, it does not work. Is this a normal behavior now?
I have tried to create a component instead of a page, but got the same result.
This is the console output after i make a change in tabs1.page.html:
2025-01-17T14:14:44.113Z vite:time 11.58ms ../../cache/19.1.1/app/vite/deps/ionicons_icons.js.map
[ng] {
[ng] "added": [],
[ng] "modified": [
[ng] "/Users/myuser/Developer/MY-PROJECT/test/src/app/tab1/tab1.page.html"
[ng] ],
[ng] "removed": []
[ng] }
[ng] ❯ Changes detected. Rebuilding...
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/app.component.ts:14:44:
[ng] 14 │ (() => { function AppComponent_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/tab3/tab3.page.ts:24:40:
[ng] 24 │ (() => { function Tab3Page_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/tab2/tab2.page.ts:24:40:
[ng] 24 │ (() => { function Tab2Page_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/tabs/tabs.page.ts:31:40:
[ng] 31 │ (() => { function TabsPage_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/explore-container/explore-container.component.ts:20:57:
[ng] 20 │ ...n ExploreContainerComponent_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]
[ng] src/app/tab1/tab1.page.ts:24:40:
[ng] 24 │ (() => { function Tab1Page_HmrLoad(t) { import(/* @vite-ignore */
[ng] ╵ ~~~~~~
[ng] ✔ Changes detected. Rebuilding...
[ng] Initial chunk files | Names | Raw size
[ng] main.js | main | 2.35 kB |
[ng] Lazy chunk files | Names | Raw size
[ng] tabs.routes-RCPPXRVE.js | tabs-routes | 3.52 kB |
[ng] tab1.page-UHEKCDIP.js | tab1-page | 2.43 kB |
[ng] Application bundle generation complete. [0.156 seconds]
[ng] Component update sent to client(s).
I don’t know if the problem lays here.
It recognizes the save, it creates, a new bundle, it sends it to the client, but there is no change (even with a manual refresh) on the browser.
I am working with another angular project as well and my google chrome works as expected. It works as expected if I change app.component.html, but no other component change gets executed on browser.
NodeJS : v23.6.0 (C:\Program Files\nodejs\node.exe)
npm : 11.0.0
OS : Windows 10
Edit: I removed .angular .node_modules package.lock then reinstall. It works but still have to reload manually. At least I don’t have to re run “ionic serve”
Edit2: I guess it is intended?
[ng] Component HMR has been enabled.
[ng] If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the --no-hmr command line option.
But “ionic serve --no-hmr” doesn’t fix auto reload.
I had the same problem with Ionic 8 and Angular 19. I deleted the .angular folder, node_modules, and package-lock.json, then reinstalled everything. It helped, and now I don’t have to run ionic serve again, but I still need to refresh the browser manually. You can also check the HMR issue on GitHub for more solutions.
Local development bugs with HMR · Issue #59602 · angular/angular · GitHub