Debugging Angular 13 in Visual Studio Code doesn't work, Unbound breakpoints

user_9266804 0
Viewed 1337

I am developing an application in .Net Core and Angular 13.
I started from the dotnet angular template (dotnet new angular) and then updated the project.
I'm trying to set up debugging in Visual Studio Code for Angular application.
The problem is that debugging starts but the breakpoints are always Unbound.

I have tried all the solutions from similar posts in StackOverflow and many from the web but always without success.

Hope someone has some suggestions.

My environment:

Folders
Folder Structure

ClientApp Folder Structure

angular.json

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "TcPortingJiraToERPWeb": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TcPortingJiraToERPWeb:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production"
            },
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "TcPortingJiraToERPWeb:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development",
              "serverTarget": "TcPortingJiraToERPWeb:server:development"
            },
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production",
              "serverTarget": "TcPortingJiraToERPWeb:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "TcPortingJiraToERPWeb:build:production",
              "serverTarget": "TcPortingJiraToERPWeb:server:production"
            },
            "development": {
              "browserTarget": "TcPortingJiraToERPWeb:build:development",
              "serverTarget": "TcPortingJiraToERPWeb:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    },
    "TcPortingJiraToERPWeb-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "TcPortingJiraToERPWeb:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "TcPortingJiraToERPWeb"
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/ClientApp",
            "sourceMaps": true,
            "resolveSourceMapLocations": [
                "${workspaceFolder}/ClientApp/",
                "!/node_modules/**"
            ],
        },
        {
            // Use IntelliSense to find out which attributes exist for C# debugging
            // Use hover for the description of the existing attributes
            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
            "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/net6.0/TcPortingJiraToERPWeb.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach"
        }
    ]
}

package.json

{
  "name": "tcportingjiratoerpweb",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng build && ng run TcPortingJiraToERPWeb:server",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run TcPortingJiraToERPWeb:serve-ssr",
    "serve:ssr": "node dist-server/main.js",
    "prerender": "ng run TcPortingJiraToERPWeb:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "13.2.6",
    "@angular/common": "13.2.6",
    "@angular/compiler": "13.2.6",
    "@angular/core": "13.2.6",
    "@angular/forms": "13.2.6",
    "@angular/localize": "13.2.6",
    "@angular/platform-browser": "13.2.6",
    "@angular/platform-browser-dynamic": "13.2.6",
    "@angular/platform-server": "13.2.6",
    "@angular/router": "13.2.6",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
    "@nguniversal/express-engine": "^13.0.2",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.8.1",
    "core-js": "^3.21.1",
    "express": "^4.15.2",
    "ngx-toastr": "^14.2.2",
    "node-sass": "^7.0.1",
    "oidc-client": "^1.11.5",
    "protractor": "~7.0.0",
    "rxjs": "^7.5.4",
    "ts-node": "~10.7.0",
    "zone.js": "0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.6",
    "@angular/cli": "13.2.6",
    "@angular/compiler-cli": "13.2.6",
    "@angular/language-service": "13.2.6",
    "@nguniversal/builders": "13.0.2",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.10.3",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "~17.0.21",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "codelyzer": "^6.0.2",
    "eslint": "^8.10.0",
    "ini": "^2.0.0",
    "jasmine-core": "~4.0.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "typescript": "4.5.5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
  },
}
angular visual-studio-code debugging
2 Answers

I am using VS 2022 Pro, not VS Code and was having this same issue.

I just resolved by going into: tools > options > debugging > general

and enabled both:

  • Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
  • Enable using the multi-target JavaScript debugger for debugging JavaScript in ASP.NET projects

Hopefully VS Code has a similar option for you.

user_12412380

Check your project ports configuration into the launchSettings.json file (Properties/launchSettings.json), then prepare your tasks.json file (under .vscode folder):

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "dotnet build debug",
            "type": "shell",
            "command": "dotnet",
            "args": [ 
                "build", "${workspaceRoot}",
                "-c", "Debug"
            ],
            "problemMatcher": "$msCompile"
        },
    ]
}

then create your launch.json file (under .vscode folder) using the ports configuration from the profiles in the launchSettings.json (the right profile have the same name of the project):

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": ".NET Core Launch (web debug)",
          "type": "coreclr",
          "request": "launch",
          "preLaunchTask": "dotnet build debug",
          // If you have changed target frameworks, make sure to update the program path.
          "program": "${workspaceFolder}/bin/Debug/net6.0/HealthCheck.dll",
          "args": [],
          "cwd": "${workspaceFolder}",
          "stopAtEntry": false,
          "internalConsoleOptions": "openOnSessionStart",
          "env": {
              "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "launchBrowser": {
            "enabled": false,
            "args": "${auto-detect-url}",
            "windows": {
              "command": "cmd.exe",
              "args": "/C start https://localhost:7231"
            },
            "osx": {
              "command": "open"
            },
            "linux": {
              "command": "xdg-open"
            }
          }
      },
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "https://localhost:7231",
        "webRoot": "${workspaceFolder}/ClientApp"
      }
  ],
  "compounds": [
      {
          "name": "Debug .net core-angular",
          "configurations": [".NET Core Launch (web debug)","Launch Chrome against localhost"]
      }
  ]
}

In this example I have used my ports configuration from my launchSettings.json.

Next go under Debug section and run "Debug .net core-angular".

user_128793210
Related