Unable to debug Typescript in VSCode

Question

Here is my launch.json

    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "Launch Server",
            "request": "launch",
            "program": "${workspaceRoot}/server/src/app.ts",
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "dev"
            },
            "skipFiles": [
                "node_modules/**/*.js"
            ],
            "outFiles": [
                "${workspaceRoot}/dist/server/src/*.js"
            ],
            "sourceMaps": true,
            "stopOnEntry": true,
            "console": "internalConsole"
        },

My source folder:

My dist folder:

The error I get is:

Cannot launch program '/Dev/myapp/server/src/app.ts'; setting the 'outFiles' attribute might help.

If I change the "program" property to ""program": "${workspaceRoot}/dist/server/src/app.js", it works but I'm then debugging the transpiled javascript and not the typescript. Obviously the transpiling with .map files is working, what is wrong?

tsconfig.json

{
  "compilerOptions": {
    "allowJs": false,
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "web",
    "dist",
    "node_modules"
  ]
}

Solution 1

You are missing src folder in your configuration:

"outFiles": [
    "${workspaceRoot}/dist/server/src/*.js"
],

Also set your mapRoot in tsconfig.json to ./dist/. Currently it will search your ./server/src folder for sourcemaps instead of ./dist

Solution 2

In my case, I had in launch.json

"program": "${file}"

Which obviously tried to run the ts file in node, when hitting F5 / Ctrl+F5 when changing it to

"program": "${workspaceFolder}/${fileBasenameNoExtension}.js"

allows me to run both active ts and js files...

also launch tsc -watch build task to get js file compiled on the fly

Comments

[Ryan Langton]

sorry not sure how that was missing at first.. even with the /src folder in outfiles I get the same error

[Saravana]

Can you post your tsconfig.json?

[Saravana]

Why is mapRoot set to ./ in tsconfig.json. Your sourcemaps are in disc/server/src/ right?

[Ryan Langton]

It depends, there are 4 apps sharing the same tsconfig.. all output to dist/{appName}/src

[Saravana]

Then perhaps it should be set to ./dist/? Currently it will search your ./server/src folder for sourcemaps instead of dist.

[Ryan Langton]

that was it! debugging typescript works now! if you want to edit this answer I'll select it as the solution, thanks!