Unable to debug Typescript in Visual Studio 2019 ASP.Net Core 3.1 Angular project

Question

I am unable to debug my Typescript files inside the VS2019 IDE. I have the debugging option "Allow Javascript Debugging in Chrome..." checked, but whenever I set a breakpoint in my typescript file, once the project launches it changes to the breakpoint icon with the warning sign and a white center with an error message

This breakpoint is not yet bound and will not be hit

I can however open up my Chrome dev tools in the browser window that VS2019 opens, and set breakpoints in my typescript files in the "sources" tab of the Chrome Dev Tools. When those breakpoints are hit, VS2019 acts as if I had set them in the IDE, and will move to the breakpoint and allow me to inspect variables, etc, but still will not "bind" to any breakpoints set in the IDE.

Also when I make edits in VS2019 and save the browser does the automatic refresh/build just fine, it's only setting breakpoints in VS2019 that's giving me trouble.

I've looked everywhere online and the only setting that seems to matter is that Options->Debugging->Allow javascript debugging...

What am I missing? It seems I should be able to do this quite easily, but I'm not sure what other settings need to be lined up.

EDIT: Link to guthub issue:

https://github.com/microsoft/vscode-js-debug/issues/425

user3175112 · Accepted Answer · 2020-07-29 16:17:17Z

3

I had similar problem, and found solution in this thread. Basically you have to replace the "webpack://" URLs with "file:///"

npm i @angular-builders/custom-webpack -D

Make sure you install the version matching your webpack. create "custom-webpack.config.js" in your app root with following content:

var webpack = require('webpack');

const config = {
    plugins: [
        new webpack.SourceMapDevToolPlugin({
                moduleFilenameTemplate: 'file:///[absolute-resource-path]'
            })
       ]
    };

    module.exports = config;

And change the "builder" option in your angular.json:

...
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./custom-webpack.config.js"
        },
...

Follow the links in that thread, there is more documentation. All credits to marczellm. Hope this helps, it worked for me.

answered Jul 29, 2020 at 16:17

user3175112

1512 silver badges8 bronze badges

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

3 Comments

cklimowski Over a year ago

Thank you! Can't believe it's taken this long to figure this out. I have a github ticket open with the VS dev team working on a fix for this, I will pass this along to them. Please upvote my question so others with the same issue have an easier time finding it!

friggle Over a year ago

@cklimowski Can you link us to the github issue? I think it's crazy we have to do this much alteration to get VS2019 to debug when VS Code handles it without any issue.

cklimowski Over a year ago

I have added a link to the github issue to the question.

Collectives™ on Stack Overflow

Unable to debug Typescript in Visual Studio 2019 ASP.Net Core 3.1 Angular project

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