VSCode Development Container中Angular的live reload功能失效如何解决

解决方案 #

1. 调整devcontainer.json配置 #

启用VS Code本地文件变更事件透传，开放Angular所需端口，修改挂载一致性策略保证文件变更实时同步：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.194.3/containers/docker-existing-dockerfile
{
    "name": "Existing Dockerfile",
    "context": "..",
    "dockerFile": "../Dockerfile",
    "settings": {
        "files.enableForwardingLocalFileEvents": true
    },
    "extensions": [],
    // 开放Angular默认服务端口与热重载WebSocket端口
    "forwardPorts": [4200, 49153],
    "workspaceMount":  "source=C:\\workspace\\Projects\\temp\\dev-angular-container,target=/workspaces/dev-angular-container,type=bind,consistency=consistent",
    "workspaceFolder": "/workspaces/dev-angular-container"
}

2. 修改Dockerfile补全依赖 #

node:alpine基础镜像默认缺少文件事件监听所需的inotify组件，新增安装逻辑：

FROM node:alpine

RUN apk add --no-cache inotify-tools
RUN npm install -g @angular/cli

EXPOSE 80

3. 调整ng serve启动参数 #

启动时指定监听所有网卡即可，不需要添加轮询相关参数：

ng serve --host 0.0.0.0

所有配置修改完成后重建开发容器，即可正常使用Angular原生热重载功能。

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