How to debug your angular application inside of an Nx workspace
The launch.json file takes a configurations array of json object configurations.
The first config is a reusable configuration we will keep hidden. This is done by adding the
presentationoption with a property ofhiddenset totrue.The following two (2) configs are app specific. For demonstration purposes I've used simplified app names but, hopefully, you can see where to replace the kebab cased name in the
commandproperty and the capitalized variant in thenameproperty.
launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome Debugger",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"presentation": {
"hidden": true
}
},
{
"command": "ng serve --project app-one",
"name": "Debug App One",
"cwd": "${workspaceFolder}",
"request": "launch",
"type": "node-terminal",
"serverReadyAction": {
"action": "startDebugging",
"name": "Launch Chrome Debugger",
"pattern": "listening on localhost:4200"
}
},
{
"command": "ng serve -- --project app-two",
"name": "Debug App Two",
"cwd": "${workspaceFolder}",
"request": "launch",
"type": "node-terminal",
"serverReadyAction": {
"action": "startDebugging",
"name": "Launch Chrome Debugger",
"pattern": "listening on localhost:4200"
}
},
]
}
After clicking start on App One or App Two the serve command will begin compiling your code as usual. Once it is done compiling it will signal a ready action to launch the chrome debugger.
Top comments (1)
I suspected of this but it worked perfectly. I also confirm it works with yarn based ones by changing it to the equivalent yarn start appname. Thank you.