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

Bert Sinnema · Accepted Answer · 2017-09-02 15:44:19Z

3

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

answered Sep 2, 2017 at 15:44

Bert Sinnema

3292 silver badges15 bronze badges

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

2 Comments

Otávio Larrosa Over a year ago

Thanks a lot guy ! I'm just doing it for now. And Augury are an awesome tool to work with Angular ! I'm Grateful :)

Bert Sinnema Over a year ago

I did a angular 4 course on Udemy by Maximillian schwarzmuller. If you're new to Angular its so worth it. Costs like $10 for 26hr tutorials

Collectives™ on Stack Overflow

Debugging Asp.Net Core app with Angular 4 in vscode

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related