基于Tilt部署的Angular应用执行ng serve无法热重载问题排查

问题根因 #

1. Tilt实时同步路径不匹配
   你当前Tiltfile中的sync('.', '/app')规则是把本地项目根目录的所有内容同步到容器的/app目录，但Dockerfile中是直接将本地./front目录下的源码拷贝到容器/app目录，也就是说Angular运行时读取的源码路径是/app/src。你本地修改front/src/app/xxx的内容同步到容器后会变成/app/front/src/app/xxx，完全不在ng serve的监听路径范围内，自然不会触发重新编译。
   你点击「trigger update」后生效，是因为触发了全量镜像构建，走了Dockerfile的ADD逻辑，把最新的front目录内容覆盖到了/app下，和实时同步的逻辑完全不同。

2. Angular监听机制不兼容容器同步场景
   Angular CLI默认依赖系统inotify事件检测文件变更，在容器文件同步、远程挂载的场景下，inotify事件经常无法正常传递到容器内的Angular进程，就算路径正确也可能检测不到变更。

修复方案 #

1. 修正Tilt实时同步规则

修改Tiltfile的docker_build配置，将同步路径和Dockerfile的ADD逻辑对齐，fall_back_on的检测路径也对应修改：

k8s_yaml('./k8s/front.yml')
k8s_resource('bitbuyer-front', port_forwards=8080)
docker_build('user632716/bitbuyer-front:latest', '.', dockerfile='./docker/Dockerfile-bitbuyer-front',
  live_update=[
    # 检测front目录下的依赖文件变更，触发全量构建
    fall_back_on(['front/package.json', 'front/package-lock.json']),
    # 同步本地front目录内容到容器的/app目录，和Dockerfile逻辑一致
    sync('./front', '/app'),
  ])

2. 给ng serve添加轮询检测参数

修改package.json的start命令，添加--poll 1000参数，让Angular每隔1秒轮询检测文件变更，规避inotify事件失效的问题：

{
  "scripts": {
    "start": "ng serve --port 8080 --host 0.0.0.0 --live-reload --watch --poll 1000"
  }
}

额外添加--host 0.0.0.0是为了确保容器内的Angular服务允许外部访问，避免出现端口转发后无法访问的问题。

修改完成后重启Tilt即可，本地修改文件后会自动触发Angular重新编译，浏览器也会自动加载最新内容。

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