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

by Saurabh Palatkar   Last Updated September 12, 2019 02:26 AM

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

 Ca

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:

enter image description here

./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/[email protected]
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"
  },


Answers 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.

Stefano
Stefano
September 10, 2019 16:38 PM

Related Questions




How Do I Debug An Angular 7 Library in Visual Code

Updated April 03, 2019 13:26 PM

Cannot find module '@angular/core' in new project

Updated August 06, 2018 21:26 PM