Ionic+Angular19项目中.html文件热重载失效问题求助

我创建了第一个基于Angular 19的Ionic项目，使用ionic serve运行时，浏览器不会重载.html文件的修改，但修改.ts文件时则正常。例如，我将组件的<ion-title>Test</ion-title>改为<ion-title>Johnny</ion-title>并保存后，日志显示已检测到变化并完成重建，且已向客户端发送组件更新，但浏览器未反映任何更改。我使用最新版Chrome，尝试开启Service workers中的Update on reload，甚至换用Edge浏览器，均未解决问题。

日志信息：

2025-01-16T10:38:02.696Z vite:time 9.82ms ../../cache/19.1.0/app/vite/deps/ionicons_icons.js.map
[ng] {
[ng]   "added": [],
[ng]   "modified": [
[ng]     "D:\\Capacitor\\visualbill\\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/tab1/tab1.page.ts:30:40:
[ng]       30 │ (() => { function Tab1Page_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:23:57:
[ng]       23 │ ...n ExploreContainerComponent_HmrLoad(t) { import(/* @vite-ignore */
[ng]          ╵                                             ~~~~~~
[ng] ✔ Changes detected. Rebuilding...
[ng] Initial chunk files     | Names       | Raw size
[ng] main.js                 | main        |  2.54 kB | 
[ng] Lazy chunk files        | Names       | Raw size
[ng] tabs.routes-KORZWXJX.js | tabs-routes |  3.52 kB | 
[ng] tab1.page-B3H4W5Q2.js   | tab1-page   |  2.86 kB | 
[ng] Application bundle generation complete. [0.141 seconds]
[ng] Component update sent to client(s).

1. 禁用热模块替换（HMR） #

日志中出现大量HMR相关的动态导入警告，推测HMR与Angular的HTML热重载机制冲突。启动服务时添加--no-hmr参数：

ionic serve --no-hmr

或者修改angular.json配置，在projects -> <你的项目名> -> architect -> serve -> options中添加：

"hmr": false

2. 清理构建缓存 #

残留的缓存可能导致更新不生效，执行清理命令后重启服务：

ng clean
ionic serve

3. 调整Vite文件监听配置 #

Angular 19基于Vite构建，修改vite.config.ts确保HTML文件被正确监听（尤其适合Windows环境）：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/vite';

export default defineConfig({
  plugins: [angular()],
  server: {
    watch: {
      usePolling: true,
      ignored: ['!**/src/**/*.html']
    }
  }
});

修改后重启ionic serve。

4. 检查变更检测策略 #

若组件启用了OnPush变更检测，需手动触发检测。在组件类中注入ChangeDetectorRef并调用detectChanges()：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: './tab1.page.html',
  styleUrls: ['./tab1.page.scss']
})
export class Tab1Page {
  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.cdr.detectChanges();
  }
}

（注：新项目默认不会启用OnPush，若代码中无此配置可跳过此步）

5. 禁用浏览器缓存 #

在Chrome/Edge开发者工具的「Network」标签下勾选「Disable cache」，刷新页面后再测试HTML修改。

内容的提问来源于stack exchange，提问作者NiceToMytyuk