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?

I've try to setup all that with VSC and Angular few months ago. You should find everything you need here https://stackoverflow.com/questions/40443217/debug-with-visual-studio-code-not-working — maxime1992, May 21 '18 at 13:14
Thanks for the comment @maxime1992, but a) I already answered my own question a day before your post, and b) your link doesn't actually answer my question, as my question is specific to debugging sub-projects in Angular 6+ — Maxxx, May 27 '18 at 07:53

score 13 · Accepted Answer · answered May 20 '18 at 07:28

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.

How to debug Angular 6 subproject from VS Code

1 Answers1