Unable to debug dockerize Angular app in VS Code - Cannot connect to the target: socket hang up

Question

I am trying to debug an Angular app which is running inside a container but I am getting the following error:

AppData\Local\Temp\vscode-chrome-debug.txt:

[11:27:35.501 UTC] OS: win32 x64
[11:27:35.501 UTC] Adapter node: v10.11.0 x64
[11:27:35.501 UTC] vscode-chrome-debug-core: 6.7.53
[11:27:35.501 UTC] debugger-for-chrome: 4.11.7
[11:27:35.501 UTC] From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en-us"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLoadedSourcesRequest":true,"supportsRestartRequest":true,"supportsSetExpression":true,"supportsLogPoints":true}}
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/initialize","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","successful":"true","timeTakenInMilliseconds":"5.823501","requestType":"request"}}}
[11:27:35.501 UTC] From client: launch({"type":"chrome","request":"launch","name":"UI Launch (Docker)","url":"http://localhost:4200","webRoot":"D:\\Saurabh\\Projects\\vscode-workflow/ng-app","sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},"trace":true,"runtimeArgs":["--remote-debugging-port=9222"],"__sessionId":"079a3ab7-942d-4dfe-807b-0be98d6fca6f"})
[11:27:35.501 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"Versions.DebugAdapterCore":"6.7.53","Versions.DebugAdapter":"4.11.7","request":"launch","args":["type","request","name","url","webRoot","sourceMapPathOverrides","trace","runtimeArgs","__sessionId","breakOnLoadStrategy","pathMapping","sourceMaps","skipFileRegExps","targetFilter","smartStep","showAsyncStacks"]}}}
[11:27:35.501 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[11:27:35.501 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[11:27:35.506 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.507 UTC] Discovering targets via http://127.0.0.1:9222/json
[11:27:35.508 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.508 UTC] There was an error connecting to http://127.0.0.1:9222/json/version : socket hang up
[11:27:35.521 UTC] HTTP GET failed: Error: socket hang up
[11:27:35.674 UTC] [chromeSpawnHelper] spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","--remote-debugging-port=9222","--user-data-dir=C:\\Users\\spala\\AppData\\Local\\Temp\\vscode-chrome-debug-userdatadir_9222","about:blank"])

Here is the source code.

Folder Structure:

./ng-app/angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-app:build",
            "open": true,
            "host": "0.0.0.0",
            "port": 80
          }
        }

./ng-app/.docker/development.dockerfile:

FROM node:10.15.1-alpine
LABEL author="Saurabh Palatkar"
RUN mkdir /usr/share/app
WORKDIR /usr/share/app
COPY package.json package.json
RUN npm i -g @angular/cli@8.0.3
COPY package-lock.json package-lock.json
RUN npm i
COPY . .
ENV PATH /node_modules/.bin:$PATH
EXPOSE 80
EXPOSE 9222
CMD ["sh", "-c", "ng serve --host=0.0.0.0 --watch --poll=2000"]

./ng-app/docker-compose.development.yml: version: "3.4"

services:
  ng-app-service:
    image: ng.app.dev.image
    container_name: ng.app.dev.container
    build:
      context: .
      dockerfile: .docker/development.dockerfile
    environment:
      NODE_ENV: development
    volumes:
      - "./:/usr/share/app"
      - /app/node_modules/
    ports:
      - 4200:80
      - 9222:9222
    command:
      [
        "sh",
        "-c",
        "npm start --host=0.0.0.0 --watch --poll=2000 --inspect=9222 --remote-debugging-port=9222 --nolazy",
      ]

./.vscode/launch.json:

{
      "type": "chrome",
      "request": "launch",
      "name": "UI Launch (Docker)",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/ng-app",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "trace": true,
      "runtimeArgs": ["--remote-debugging-port=9222"]
    }

./.vscode/tasks.json:

{
      "label": "serve ui dev docker",
      "type": "npm",
      "script": "serve-ui-dev-docker",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }

./package.json:

"scripts": {
    "serve-ui-dev-docker": "cd ng-app && docker-compose -f docker-compose.development.yml up --build"
  },

Answer 1

I tried to replicate your issue but I noticed earlier that the problems might be in the CMD in your dockerfile and the command block in your docker-compose.yml.

The CMD uses the exec format and it should read:

CMD ["ng", "serve", "--host=0.0.0.0", "--watch", "--poll=2000"]

or

CMD ng serve --host=0.0.0.0 --watch --poll=2000

NOTE: I removed the sh -c since it's not needed.

src: https://docs.docker.com/engine/reference/builder/#cmd

---

In the docker-compose there's the same problem:

command: [ "npm", "start", "--host=0.0.0.0", "--watch", "--poll=2000", "--inspect=9222", "--remote-debugging-port=9222", "--nolazy" ]

src: https://docs.docker.com/compose/compose-file/#command

Try these changes and check if the docker image can start from the command line first.

---

The second problem I'm seeing is that you don't need to define the node inspect process to debug the angular application. The code will be debugged in chrome not by the ng serve process. I'd suggest to remove the 9222 port mapping from the docker-compose file and the "runtimeArgs": ["--remote-debugging-port=9222"] from the launch.json for the UI Launch (Docker)