Debug both Typescript & C# in VSCode in same session

Question

If I create a project using "dotnet new angular", I can debug both the C# and Typescript code in Visual Studio 2017. But within Visual Studio Code, I can only debug the C#. When I try to place a breakpoint on any Typescript instruction, it says: "No symbols have been loaded for this document". Since it works fine in VS 2017, it seems to me that the Typescript configuration should be OK.

When I open the project in VSCode, it says "Required assets to build and debug are missing from your project. Add them?" I answer "yes" and then it adds the ".vscode" folder containing launch.json and tasks.json. Perhaps it is not adding the correct launch configuration for the debugger? The only configurations in launch.json are for ".NET Core Launch (web)" and ".NET Core Attach".

I have the Debugger for Chrome 3.5.0 extension installed.

This is the launch.json that is generated:

   {
   "version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "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": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        }
    ]
}

Answer 1

It was a problem with the launch.json file that is generated by VSCode. I needed to add a configuration for the Chrome debugger. I also needed to add a "compound" configuration in order to debug both C# and Typescript in the same session. Below are the additional configurations required. Choose the "Full stack" configuration to debug both C# and Typescript.

I found the solution thanks to help from auchenberg in the Microsoft/vscode-recipes repository on Github. I created a pull request to add this new recipe. (See: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-SpaTemplates )

The additional configurations required are:

    {
        "name": ".NET Core Launch (full)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        // If you have changed target frameworks, make sure to update the program path.
        "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "internalConsoleOptions": "openOnSessionStart",
        "launchBrowser": {
            "enabled": false
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceFolder}/Views"
        }
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Chrome",
        "url": "http://localhost:5000",
        "webRoot": "${workspaceRoot}/wwwroot"
    }
],
"compounds": [
    {
        "name": "Full stack",
        "configurations": [".NET Core Launch (full)", "Chrome"]
    }
]