Docker容器内Angular应用无变更反复构建重载问题求助

Docker容器构建完成并启动后，Angular应用在无业务文件变更的场景下，持续循环执行构建流程，同时触发浏览器页面自动重载，不符合「仅项目文件变更时触发重建与页面重载」的预期。
当前运行环境：Windows平台Docker Desktop，采用WSL2作为运行引擎，Angular CLI版本为12。

• package.json 启动脚本配置：

"start": "ng serve --host 0.0.0.0 --poll 500",

此前尝试添加--disable-host-check参数，问题未解决。

• docker-compose.yml 配置：

version: '3.9'
services:
    web:
        build:
            context: .
            dockerfile: dockerfile_dev
        image: web
        container_name: web
        restart: unless-stopped
        environment:
            - CHOKIDAR_USEPOLLING=true
        ports:
            - 4200:4200
        volumes:
            - web_src:/home/server/src

volumes:
    web_src:
        external: true  

• 开发环境Dockerfile配置：

FROM node:14.15.0-alpine

RUN mkdir -p /home/server

WORKDIR /home/server

ADD package.json /home/server/package.json
ADD package-lock.json /home/server/package-lock.json
ADD angular.json /home/server/angular.json
ADD tsconfig.json /home/server/tsconfig.json

RUN npm install
RUN npm install -g @angular/cli@12.2.14

EXPOSE 4200

CMD ["ng", "start"]

• 容器运行日志特征：每1-3秒触发一次编译，无文件变更时固定输出14个无修改chunk，循环打印编译成功信息，日志片段如下：

web  | ✔ Compiled successfully.
web  | ✔ Browser application bundle generation complete.
web  |
web  | 14 unchanged chunks
web  |
web  | Build at: 2022-07-01T05:42:50.134Z - Hash: da29a1170afc2a3ec1b9 - Time: 3909ms
web  |
web  | ✔ Compiled successfully.
web  | ✔ Browser application bundle generation complete.
web  |
web  | 14 unchanged chunks
web  |
web  | Build at: 2022-07-01T05:42:52.176Z - Hash: da29a1170afc2a3ec1b9 - Time: 1620ms
web  |
web  | ✔ Compiled successfully.
web  | ✔ Browser application bundle generation complete.
web  |
web  | 14 unchanged chunks
web  |
web  | Build at: 2022-07-01T05:42:54.958Z - Hash: da29a1170afc2a3ec1b9 - Time: 2429ms

• Windows平台WSL2引擎下，Docker跨NTFS/Linux文件系统挂载时，文件元数据（修改时间、权限位）识别存在固有偏差，当前同时开启了ng serve --poll 500和CHOKIDAR_USEPOLLING=true双重轮询，500ms的轮询间隔过短，极易将文件系统的正常元数据波动误判为文件变更，触发重复构建。
• 现有配置未排除非源码监听路径，Angular运行时生成的缓存文件、临时日志、依赖目录下的自动更新文件，都会被watch进程捕获，触发无意义重建。
• 使用外部命名卷挂载源码时，卷内文件的权限、修改时间可能被容器内进程自动改写，进一步提高了误判概率。

按优先级依次尝试调整：

方案1：优化监听与轮询配置，排除无关路径 #

1. 修改package.json中的start脚本，调大轮询间隔，补充必要参数：

"start": "ng serve --host 0.0.0.0 --poll 2000 --disable-host-check",

2. 修改项目根目录angular.json，在projects -> [你的项目名] -> architect -> serve -> options节点下添加监听忽略规则，排除非源码目录：

"poll": 2000,
"watchOptions": {
  "ignored": [
    "node_modules/**",
    "dist/**",
    ".angular/**",
    "**/*.log",
    "tmp/**"
  ]
}

3. 修改docker-compose.yml中的环境变量，统一轮询间隔，增加初始化忽略配置：

environment:
  - CHOKIDAR_USEPOLLING=true
  - CHOKIDAR_INTERVAL=2000
  - CHOKIDAR_IGNORE_INITIAL=true

调整完成后重新构建容器启动验证。

方案2：替换挂载方式，使用WSL2原生路径绑定挂载 #

不要使用外部命名卷，将源码存放在WSL2的ext4原生文件系统路径下（禁止放在/mnt/c/、/mnt/d/这类Windows盘挂载路径），修改docker-compose.yml的volumes配置为绑定挂载：

volumes:
  # 替换为你WSL2内的实际项目源码路径
  - /home/your-user/your-angular-project/src:/home/server/src
  - /home/your-user/your-angular-project/angular.json:/home/server/angular.json
  - /home/your-user/your-angular-project/tsconfig.json:/home/server/tsconfig.json
  - /home/your-user/your-angular-project/package.json:/home/server/package.json

该方式可以彻底规避跨文件系统的元数据识别偏差问题，是WSL2下Docker开发环境的推荐配置。

方案3：临时关闭热重载定位问题 #

如果上述调整后仍存在循环构建，可先关闭热重载验证触发源，修改start脚本：

"start": "ng serve --host 0.0.0.0 --poll 2000 --disable-host-check --live-reload=false",

如果关闭后循环构建停止，说明问题由热重载WebSocket连接触发，检查浏览器缓存、项目内Service Worker配置即可，开发环境下可暂时关闭Service Worker。

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