Return to Answer

There are a many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

There are many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

1. It is important to start VS code from the right folder (see answers from CodeChimp and monstertjie_za).
   Open a console window and cd to the project folder.
   Example:
   cd myProject
code .

2. Make sure you're configuring the files in the right .vscode folder.
   The right .vscode folder is a subdirectory of your project folder.
   Note: if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the src folder, then you will find a .vscode folder there (as it was in my case), containing configuration files which are useless for debugging.

3. Set up a debug configuration in the .vscode\launch.json file.
   Make sure that you have specified the right port for your application, in my case port 4200 was doing fine.
   Also make sure that the "webRoot" parameter is configured correctly (see answer from Stig Perez). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at StackOverflow regarding how to display VS code variable values. .
   Note: If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select "Add Configuration...", then press the blue "Add Configuration" button. Select "Launch Chrome" as configuration to be added.
   Example configuration (launch.json):

   "configurations": [
    {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/projectsubfolder"
    }]
   

4. Now set the breakpoints in your application.

5. To launch your application with debugger, open a terminal window inside VS code, type
   cd projectsubfolder
npm install & ng serve
   This ensures the dependent packages are resolved and downloaded before your application is being compiled.
   Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.
   Note: You don't need to run npm install every time, just when packages/dependencies have changed. Most of the time, it is sufficient to execute ng serve to re-compile and run your code.

1. It is important to start VS code from the right folder (see answers from CodeChimp and monstertjie_za).
   Open a console window and cd to the project folder.
   Example:
   cd myProject
code .

2. Make sure you're configuring the files in the right .vscode folder.
   The right .vscode folder is a subdirectory of your project folder.
   Note: if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the src folder, then you will find a .vscode folder there (as it was in my case), containing configuration files which are useless for debugging.

3. Set up a debug configuration in the .vscode\launch.json file.
   Make sure that you have specified the right port for your application, in my case port 4200 was doing fine.
   Also make sure that the "webRoot" parameter is configured correctly (see answer from Stig Perez). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at StackOverflow regarding how to display VS code variable values.
   Note: If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select "Add Configuration...", then press the blue "Add Configuration" button. Select "Launch Chrome" as configuration to be added.
   Example configuration (launch.json):

   "configurations": [
    {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/projectsubfolder"
    }]
   

4. Now set the breakpoints in your application.

5. To launch your application with debugger, open a terminal window inside VS code, type
   cd projectsubfolder
npm install & ng serve
   This ensures the dependent packages are resolved and downloaded before your application is being compiled. Wait until the compilation is finished.
   Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.
   Note: You don't need to run npm install every time, just when packages/dependencies have changed. Most of the time, it is sufficient to execute ng serve to re-compile and run your code.

There are a many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

let me summarize it step by step with reference to the answers above what helped me:

1. It is important to start VS code from the right folder (see answers from CodeChimp and monstertjie_za).
   Open a console window and cd to the project folder.
   Example:
   cd myProject
code .

2. Make sure you're configuring the files in the right .vscode folder.
   The right .vscode folder is a subdirectory of your project folder.
   Note: if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the src folder, then you will find a .vscode folder there (as it was in my case), containing configuration files which are useless for debugging.

3. Set up a debug configuration in the .vscode\launch.json file.
   Make sure that you have specified the right port for your application, in my case port 4200 was doing fine.
   Also make sure that the "webRoot" parameter is configured correctly (see answer from Stig Perez). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at StackOverflow regarding how to display VS code variable values..
   Note: If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select "Add Configuration...", then press the blue "Add Configuration" button. Select "Launch Chrome" as configuration to be added.
   Example configuration (launch.json):

   "configurations": [
    {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/projectsubfolder"
    }]
   

Replace projectsubfolder by the subfolder you might have in your project. Note that this is case-sensitive (see answer from Michael Walsh).

4. Now set the breakpoints in your application.

5. To launch your application with debugger, open a terminal window inside VS code, type
   cd projectsubfolder
npm install & ng serve
   This ensures the dependent packages are resolved and downloaded before your application is being compiled.
   Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.

There are a many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

let me summarize it step by step with reference to the answers above what helped me:

1. It is important to start VS code from the right folder (see answers from CodeChimp and monstertjie_za).
   Open a console window and cd to the project folder.
   Example:
   cd myProject
code .

2. Make sure you're configuring the files in the right .vscode folder.
   The right .vscode folder is a subdirectory of your project folder.
   Note: if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the src folder, then you will find a .vscode folder there (as it was in my case), containing configuration files which are useless for debugging.

3. Set up a debug configuration in the .vscode\launch.json file.
   Make sure that you have specified the right port for your application, in my case port 4200 was doing fine.
   Also make sure that the "webRoot" parameter is configured correctly (see answer from Stig Perez). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at StackOverflow regarding how to display VS code variable values..
   Note: If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select "Add Configuration...", then press the blue "Add Configuration" button. Select "Launch Chrome" as configuration to be added.
   Example configuration (launch.json):

   "configurations": [
    {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}/projectsubfolder"
    }]
   

Replace projectsubfolder by the subfolder you might have in your project. Note that this is case-sensitive (see answer from Michael Walsh).

4. Now set the breakpoints in your application.

5. To launch your application with debugger, open a terminal window inside VS code, type
   cd projectsubfolder
npm install & ng serve
   This ensures the dependent packages are resolved and downloaded before your application is being compiled.
   Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.
   Note: You don't need to run npm install every time, just when packages/dependencies have changed. Most of the time, it is sufficient to execute ng serve to re-compile and run your code.