Error on Typescript instruction: "Breakpoints set but not yet bound" in VS2017

Question

I create a project with "dotnet new angular". When a breakpoint is set on a Typescript instruction, it shows as a open red circle when run. The error message is "The breakpoint will not currently be hit. Breakpoints set but not yet bound."

This problem started when I updated from .Net Core SDK 1.x to 2.x Is this a bug in 2.x or something to do with my setup? Does anyone using 2.x have Typescript breakpoints working in VS2017? I describe my setup in detail below and where it fails.

To duplicate the problem, you can set a breakpoint on "this.currentCount++;" in ClientApp\src\app\counter\counter.component.ts and then click "Increment" on the "Counter" page.

I am currently using what should be the latest official releases:

Visual Studio Pro 15.7.2
.Net Core SDK 2.1.300 (x64)
.Net Core Runtime 2.1.0 (x64)

I tried other SDK 2.x releases. It fails in v2.1.4 & v2.1.300. But breakpoints succeed in v2.0.0, 2.1.200 & 2.1.201.

The difference is that, when it succeeds, each of the SDKs generate the files "webpack.config.js" & "webpack.config.vendor.js" in the root of the project during the "dotnet new angular". The latest 2.x release does not generate these files in the root. So I don't want to use prior releases which did.

The other difference is that the working projects define the location of "ClientApp" in webpack.config.js. In those projects that fail, the ClientApp location is defined in startup.cs.

Some more info:

Using sdk v2.1.201 (one which works), the generated package.json contains:

"typescript": "2.4.1",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",

Using sdk v2.1.300 (one which fails),the generated package.json contains:

"typescript": "~2.5.3"

but does not contain entries for webpack. In node_modules/.bin there is a "webpack.cmd" whose version is 3.11.0.

When I type "tsc -v" at in a VS2017 Developer Command window, I get:

version 2.8.4

UPDATE: I added an issue to the .Net SDK issues.
I was asked there to open a Developer Feedback item for Visual Studio. They believe it is a VS issue for TS/JS tooling.

If you are also having this issue, it can help bump its priority, if you add to the feedback page.

UPDATE (2018-03-23) RESOLVED

This problem may have been resolved earlier than today, but I hadn't looked into it again until today. Today, I updated VS2017 to v15.9.9, .Net Core SDK to 2.2.105 and .Net core Host to 2.2.3. Typing "tsc -v" at the developer prompt shows "Version 3.1.2".

When I now run "dotnet new angular" and set a breakpoint on "this.currentCount++", the breakpoint is hit.

NOTE: This problem may still be occurring when running the client app in other browsers than Chrome. But I was always using Chrome, both when I had the problem earlier and today when it looks resolved.

Answer 1

Update from Microsoft on linked thread:

Typescript breakpoints in Visual Studio will not work for ASP.NET core projects currently in either of the 2 situations:

1. If you have either renamed/deleted the "ClientApp" directory within your Visual Studio project to be something else, OR
2. You have Typescript/JavaScript files in a different directory (other than ClientApp).

Unfortunately we currently do not have a way to resolve breakpoints in Typescript files outside of the ClientApp folder. We are working with the relevant teams within Visual Studio for a fix for the same but if you are impacted by this change, I would recommend switching to working within the "ClientApp" folder.

My workaround is that I debug the front-end separately using VSCode which is not ideal but seems the only way to get it working with .net core and custom project structure