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}"
        }
    ]
}

John Pankowicz · Accepted Answer · 2017-12-13 16:05:50Z

6

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"]
    }
]

edited Dec 13, 2017 at 16:05

answered Dec 2, 2017 at 3:26

John Pankowicz

4,5213 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kirtlander Over a year ago

Brilliant! For the new Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0 templates, though, I had to make a couple of tweaks to permit debugging TypeScript code in VS Code. First, the spa.dll doesn't seem to be around anymore, so I copied the dll that the template wanted to use in the default launch.json file, dotnet-core-angular.dll (in the same directory). Additionally, in order to debug TS in VS Code, I had to ad a sourceMapPathOverrides entry to the Chrome launch config: "sourceMapPathOverrides": { "webpack:\\src\*": "${workspaceFolder}\\ClientApp\\src\*", }

John Pankowicz Over a year ago

@Kirtlander "spa.dll" is just the dll of your project. I made a typo. It should have been "my-app.dll" to match my sample project in Microsoft/vscode-recipes. I will update that page. I didn't need to add a sourceMapPathOverrides value to get it working. Did you start with a new project from the template or did you convert an existing project. I had problems when I tried a conversion. I then switched to building on a new template project. See github.com/govmeeting/govmeeting. I was also able to move the ClientApp folder into it's own separate project.

Gerardo Buenrostro González Over a year ago

I had this setup and worked fine for years, but since last week, the browser part closes when lazy loading a module. (it worked just fine for a long time)

Collectives™ on Stack Overflow

Debug both Typescript & C# in VSCode in same session

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related