How to debug Angular 6 subproject from VS Code

Question

I Created a new Angular 6 CLI project

ng new myProjects

Created 'sub project'

ng g mySubProject

If I ng serve mySubProject then try to debug from VS Code using my normal launch.json, then breakpoints are not hit.

{
  "name": "Launch Chrome (test)",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200/",
  "webRoot": "${workspaceFolder}"
},

Can someone guide me how to set up my launch.json to debug sub-projects like this?

(for details on how I have my sub projects set up, it's based on a post here )

If I just ng serve, then this launch.json debigs the 'main' project OK - so I am guessing I need to set up somewhere in the launch.json to tell it where the child project is?

Answer 1

To debug a sub-project in an Angular 6.0 workspace: Set your launch.json configuration to look like:

{
  "name": "ng serve my sub application",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200",
  "webRoot": "${workspaceRoot}/projects/mysubapplication"
}

This means you will need a configuration entry for every sub application.