Live relod 无法在 Angular 的 vscode 开发容器中工作

Question

我一直在使用 VScode 开发容器以角度方式开发模拟应用程序。为此，我创建了一个 docker，并使用“添加开发容器配置文件”选项创建了 devcontainer.json。

除了 Angular 的实时重新加载功能之外，一切都运行良好。因此，我被迫停止服务并使用 ngserve 命令再次运行它。

以下是我使用过的示例 docker 文件

FROM node:alpine

RUN npm install -g @angular/cli

EXPOSE 80

devcontainer.json

// 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",

    // Sets the run context to one level up instead of the .devcontainer folder.
    "context": "..",

    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
    "dockerFile": "../Dockerfile",

    // Set *default* container specific settings.json values on container create.
    "settings": {},
    
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [],

    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],

    // Uncomment the next line to run commands after the container is created - for example installing curl.
    // "postCreateCommand": "apt-get update && apt-get install -y curl",

    // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
    // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

    // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
     "workspaceMount":  "source=C:\\workspace\\Projects\\temp\\dev-angular-container,target=/workspaces/dev-angular-container,type=bind,consistency=delegated",
     "workspaceFolder": "/workspaces/dev-angular-container",
     
    // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
    // "remoteUser": "vscode"
}

除了轮询之外，是否有一种简单的方法可以实现实时重新加载？

Answer 1

我最近与 Astro 遇到了类似的事情，为我解决的是添加

"containerEnv": {
    "CHOKIDAR_USEPOLLING": "true"
}

到devcontainer.json根目录下的文件。这是一个非常小的例子，但希望能帮助解决您的问题：

// 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.245.0/containers/typescript-node
{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        // Update 'VARIANT' to pick a Node version: 18, 16, 14.
        // Append -bullseye or -buster to pin to an OS version.
        // Use -bullseye variants on local on arm64/Apple Silicon.
        "args": {
            "VARIANT": "18"
        }
    },
    "containerEnv": {
        "CHOKIDAR_USEPOLLING": "true"
    },
    // Configure tool-specific properties.
    "customizations": {
        // Configure properties specific to VS Code.
        "vscode": {
            // Add the IDs of extensions you want installed when the container is created.
            "extensions": [
                "dbaeumer.vscode-eslint",
                "bradlc.vscode-tailwindcss",
                "astro-build.astro-vscode",
                "ms-vscode.live-server"
            ]
        }
    },
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    "forwardPorts": [
        3000
    ],
    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",
    // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "node"
}