Debugging Asp.Net Core app with Angular 4 in vscode

Question

I'm a newbie with Angular 4, but I've configured a project to work with Angular 4 and Asp.Net Core 2.0. My issue is that when I pressed F5 at Visual studio code, I can debug my C# files, but not my typescript code.

How the masters of web do it ? Any different way to work, or another setting at launch.json and tasks.json at .vscode folder ?

here's the project url: https://github.com/otaviolarrosa/VirtualStore

my launch.json file:

{
"version": "0.2.0",
"configurations": [
    {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceRoot}/VirtualStore/bin/Debug/netcoreapp2.0/VirtualStore.dll",
        "args": [],
        "cwd": "${workspaceRoot}/VirtualStore",
        "stopAtEntry": false,
        "launchBrowser": {
            "enabled": true,
            "args": "${auto-detect-url}",
            "windows": {
                "command": "cmd.exe",
                "args": "/C start ${auto-detect-url}"
            },
            "osx": {
                "command": "open"
            },
            "linux": {
                "command": "xdg-open"
            }
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceRoot}/Views"
        }
    },
    {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach",
        "processId": "${command:pickProcess}"
    }
]}

and my tasks.json file:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "taskName": "build",
        "command": "dotnet build",
        "type": "shell",
        "group": "build",
        "presentation": {
            "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
]}

Answer 1

The best way to debug an Angular4 app is in the browser that runs the app. In development mode Angular4 creates sourcemap files. In e.g. Chrome you can browse through the sourcemap which looks similar to the paths of your Angular app. You can also set breakpoints here.

A very cool debugging tool for Angular 2+ apps is Augury

So debug your C# in VSCODE and your Angular app in Chrome