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.

Merrileemerrili

I have the same problem. Trying to create an MVC .net Angular project. – Planography

Answer 1

On Aug 29, 2018, a solution to this problem was reported by Blair Wang on: https://developercommunity.visualstudio.com/content/problem/268468/typescript-breakpoints-not-hit-in-visual-studio-15.html#reply-323159

    "This issue has been fixed and is now available in our latest update. You can download the update via the in-product notification or from here: https://visualstudio.microsoft.com/vs/"

I had not seen this until today (2018-03-23), when I tested the fix using:

    Visual Studio v15.9.9
    .Net Core SDK 2.2.105
    .Net core Host 2.2.3
    Typescript 3.1.2

It was working with the fix. It is also still working as of today on 2019-09-09 with VS2017 v15.9.15 and also Vs2019.

Merrileemerrili

Answer 2

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

Zarla

Neither of the 2 situations that you mention is true in my case. As I said: 'I create a project with "dotnet new angular".' This both uses "ClientApp" for the folder name and it also puts all Typescript/JavaScript files under that folder. – Merrileemerrili

@Guerrilla, +1 - could you have a look at my simi8lar question here: #59212372 – Holothurian

Answer 3

For anybody who runs across this issue while using .Net Core 3.1 and Angular/TypeScript, the solution for me was to add app.UseSpaStaticFiles() before the app.Use() line in the Startup.cs Configure method:

// Declare middleware "use" statements before app.Use() in order to run/debug properly.
app.UseAuthentication();
app.UseHttpsRedirection();
app.UseSpaStaticFiles();
app.UseCookiePolicy();
app.UseStaticFiles();

// Necessary to force users to authenticate
app.Use(async (context, next) =>
{
  if (!context.User.Identity.IsAuthenticated)
  {
    await context.ChallengeAsync();
  }
  else
  {
    await next();
  }
});

Originally, I had the app.UseSpaStaticFiles() statement below the app.Use section and received the "breakpoints set but not yet bound" message. This occurred in Visual Studio 2019. After moving the middleware statements up, the breakpoints started working. (I think this used to work before I upgraded to .Net Core 3, but I'm not certain.)

Reisfield