Visual Studio 2019 (not VS Code) typescript debugging breakpoint unbound

Question

What am I Missing .....

I've got an Angular 12 project hosted within a .Net 5 project using Visual Studio 2019 (it is an older application I'm trying to do a quick upgrade of versions on - I know this probably isn't the ideal setup).

I am trying to debug my angular (typescript) components by setting a breakpoint in Visual Studio but I'm getting the 'breakpoint unbound' issue and it's not being hit. I understand the workings about typescript files getting converted to javascript files for hosting, however, I used to be able to just set a breakpoint in Visual Studio in my typescript files and it would be hit without any issues (Angular 5 with .Net2.2).

I've been googling for ages but can't seem to find exactly what I need to do - possibly it's a tsconfig.json setting or possibly it's that I'm doing a production build with my 'ng build' command for the angular application or maybe theres a development setting I haven't got correct (I'm not sure).

I've found some instructions on how I can debug the code using the Browser but this isn't ideal - it kind of defeats one of the purposes of using a quality IDE.

Thanks in advance for any help you can give me - I'm going mad with this!

My tsconfig file content is:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

my tsconfig.app.json file content is:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

and my angular.json file settings are:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:interceptor": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../wwwroot/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        }
      }
    }
  },
  "defaultProject": "client"
}

Tianyu · Accepted Answer · 2021-09-13 04:25:14Z

2

Try these and see if one of them works.

1). Go to Tools > Options > Debugging > General > check “Enable JavaScript debugging for ASP .NET(Chrome, Edge and IE)” checkbox. (not sure if this works, you can have a try)

2). Make sure that you have selected “Debug” Mode/Configuration instead of “Release” while debugging.

3). Go to your solution/project folder and delete the .vs, bin and obj folders(you can make a backup), then rebuild your project/solution and debug it.

4). Try to restart Visual Studio, and reset breakpoints.

answered Sep 13, 2021 at 4:25

Tianyu

1,0905 silver badges8 bronze badges

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

7 Comments

Sandy Over a year ago

Thanks for your answer Tianyu - unfortunately it didn't work. I'm correct in thinking that you should be able to set a breakpoint in a typescript file in Visual Studio within the angular application and it stop when running it in the browser in debug mode?? I used to do it this way with Internet Explorer 11. Does anyone else have any suggestions or can find a problem in my tsconfig file?

Tianyu Over a year ago

Yes, VS hit the breakpoint(in TS) and stopped on my side. But I waited for one minutes, or maybe 30 seconds, or two minutes, I don’t remember. And before Debugging process loaded well, I could see that the breakpoints warned similar like “the breakpoints are set but unbound”, I just waited and it worked then.

Sandy Over a year ago

Hmm I'm still having trouble to get this working even after a Visual Studio Repair. I've even tried it with Visual Studio Mac but no joy. I was wondering if you would mind seeing if you can get a breakpoint to hit with my testing solution I've uploaded to GitHub (github.com/rasaconsulting-sandy/TestAngularTypescriptDebugging). I'm suspecting I have a tsconfig / angular.json setting incorrect but can't figure out which one. I couldn't get a breakpoint to hit with this simple, standard ASP.Net Core Web App with the standard Angular app. Thanks in advance if you don't mind doing this.

Sandy Over a year ago

note: the solution will need the 'nom install' and 'ng build' on the 'client' folder before running in visual studio.

Tianyu Over a year ago

Hi Sandy, I tested your sample, the breakpoints also didn’t hit on my side. I can confirm that the newly simple created Asp .Net Core project(with Angular) can successfully hit the breakpoints in VS 2019. I checked the tsconfig.json file, angular.json file and other files, and matched them, did some modifications, but I didn’t find or successfully change them to make breakpoints work. I think this should be related to the settings of this project, or the versions of related tools, but need to check more.

|

Collectives™ on Stack Overflow

Visual Studio 2019 (not VS Code) typescript debugging breakpoint unbound

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related