Warren Dugan
Posted on March 1, 2022
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.
Posted on March 1, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.