Live relod not working in vscode Development Container for angular

Question

I have been working on a mock application in angular using the VScode Development Container. For that I created a docker and created the devcontainer.json using the Add Development container configuration file option.

Everything was working perfectly except the live reload feature of angular. Due to this am forced to stop the serve and forced to run it again, using the ng serve command.

Following is the sample docker file that I had used

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"
}

Would there be a straightforward method to achieve live reload other than polling?

score 0 · Answer 1 · answered Jul 27 '23 at 01:24

I recently had a similar thing with Astro, what solved it for me was adding

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

to the devcontainer.json file at root. This is pretty minimal example but hopefully will help resolve your issue:

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

Live relod not working in vscode Development Container for angular

1 Answers1