(In a similar context to this query, but more focused on VsCode)
I am attempting to debug the AngularU starter kit with Visual Studio Code. However, it is combining the TypeScript output into one bundle.js along with a side bundle.js.map:
↳web
↳dist
↳client
↳server
⇒bundle.js
⇒bundle.js.map
↳src
⇒server.ts
⇒client.ts
When I try to run it, I encounter an error from the VS UI:
request 'launch': cannot launch program '/home/.../web/src/server.ts'; setting the 'outDir' attribute might help
outDir works fine on my other projects (not using webpack) when the output files are not merged, but it doesn't seem to help here. I am quite sure it is looking for server.js (but only a bundle.js and its map file are present).
Is there an outFile option for generating a single file output?
My launch.json:
{
"name": "WebServer",
"type": "node",
"request": "launch",
"program": "./web/src/server.ts",
"stopOnEntry": false,
"args": [],
"cwd": "./web",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": "./web/dist/server"
}
EDIT: It does run when I rename the webpack server output as server.js and server.map.js (instead of bundle.*), but unfortunately the breakpoints are not working:
https://i.sstatic.net/ufKjo.png
Here is the content of the server.js.map file.
Both the TS compiler and Webpack are set up to create a sourcemap as per this tutorial.
Am I overlooking something?
EDIT2: The issue with breakpoints seems to be related to the sources URI in the map file.
When I change this
"webpack:///./src/server.ts",
to this
"../../src/server.ts",
the breakpoints start working.