Breakpoint not bound when Debugging Typescript Apollo Server (graphQL) in VS Code

Question

I am a java guy and new to nodejs. I am working on an existing typescript project. I am unable to debug my application. The break points are greyed out and shows "Breakpoint set but not yet bound"

VS CODE
-------
Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

launch.json
----------
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Prospector",
            "program": "${workspaceFolder}/dist/main.js",
            "preLaunchTask": "npm: build",
            "env": {"NODE_ENV":"loc"},
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
              ],
            "skipFiles": [
                "${workspaceFolder}/node_modules//*.js",
                "<node_internals>//*.js"
            ]
        }
    ]
}

tsconfig.json
--------
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "lib": [
            "es6",
            "esnext"
        ],
        "declaration": false,
        "sourceMap": true,
        "outDir": "dist",
        "rootDir": "src",
        "removeComments": true,
        "strict": true,
        "noImplicitAny": true,
        "moduleResolution": "node",
        "strictNullChecks": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "exclude": [
        "tools"
    ]
}

Debug Console
------------
C:\Program Files\nodejs\node.exe --inspect-brk=20574 C:\Data\work\NodeProjects\reu-ext-gql-api\dist\main.js 
Debugger listening on ws://127.0.0.1:20574/537adef1-2250-40b3-8980-b43c0f751836
For help, see: https://nodejs.org/en/docs/inspector
Fetching config from local config files
config.factory.ts:25
Apollo Server (graphQL) listens on http://localhost:8080/RegisteredEndUserExtended

When launching the application it stops at a Breakpoint set in a config .ts file in the node_modules folder and when continuing, the application starts properly. When sending graphql requests, I get the response. But it doesn't stop at the breakpoints set in my .ts files (resolvers) in the src directory or .js files in the dist directory. I tried with VS code 1.51.1 also, but there is no luck. Please help.

Thanks in advance

Answer 1

Let's compare with my working configuration, maybe it helps you to understand what goes wrong (I see first difference that I launch TS-file in contrast to your launch of JS-file):

    {
      "type": "node",
      "request": "launch",
      "name": "Launch TS Program",
      "program": "${workspaceFolder}/app.ts",
      "env": {
        "NODE_ENV": "standalone"
      },
      "preLaunchTask": "tsc: build - tsconfig.json",
      "cwd": "${workspaceFolder}",
      "outFiles": [
        "${workspaceFolder}/build/**/*.js"
      ],
      "sourceMaps": true,
      "outputCapture": "std"
    },

and tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "build",
    "typeRoots": [
      "@types",
      "node_modules/@types"
    ]
  },
  "include": [
    "application/**/*",
    "@types/**/*",
    "app.ts"
  ]
}

Answer 2

I had the same problem with an IntelliJ IDE.

In my case setting "sourceMap": true in tsconfig.json did the trick.