Typescript 指令错误：VS2017 中的 "Breakpoints set but not yet bound"

Question

我用 "dotnet new angular" 创建了一个项目。当在 Typescript 指令上设置断点时，它在运行时显示为一个开放的红色圆圈。错误信息是"The breakpoint will not currently be hit. Breakpoints set but not yet bound."

当我从 .Net Core SDK 1.x 更新到 2.x 时，这个问题开始了。这是 2.x 中的错误还是与我的设置有关？是否有人使用 2.x 在 VS2017 中使用 Typescript 断点？我在下面详细描述了我的设置以及失败的地方。

要重现该问题，您可以在 ClientApp\src\app\counter\counter 中的 "this.currentCount++;" 上设置断点。component.ts 然后单击 "Counter" 页面上的 "Increment"。

我目前使用的应该是最新的官方版本：

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

我尝试了其他 SDK 2.x 版本。它在 v2.1.4 和 v2.1.300 中失败。但断点在 v2.0.0、2.1.200 和 2.1.201 中成功。

不同的是，成功后，"dotnet new angular"期间，每个SDK都会在项目根目录下生成文件"webpack.config.js" & "webpack.config.vendor.js"。最新的 2.x 版本不会在根目录中生成这些文件。所以我不想使用以前的版本。

另一个区别是工作项目在 webpack.config.js 中定义了 "ClientApp" 的位置。在那些失败的项目中，ClientApp 位置在 startup.cs.

中定义

更多信息：

使用 sdk v2.1.201（有效），生成的 package.json 包含：

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

使用 sdk v2.1.300（一个失败），生成的 package.json 包含：

"typescript": "~2.5.3"

但不包含 webpack 的条目。在node_modules/.bin里面有一个"webpack.cmd"，版本是3.11.0.

当我在 VS2017 开发人员命令 window 中键入 "tsc -v" 时，我得到：

version 2.8.4

更新：我在 .Net SDK issues.
中添加了一个问题我被要求在那里打开一个 Developer Feedback item for Visual Studio。他们认为这是 TS/JS 工具的 VS 问题。

如果您也有这个问题，如果您添加到反馈页面，它可以帮助提高它的优先级。

更新 (2018-03-23) 已解决

这个问题可能比今天早解决了，但直到今天我才再次查看它。今天更新VS2017到v15.9.9，.Net Core SDK到2.2.105，.Net core Host到2.2.3。在开发者提示符下输入 "tsc -v" 显示 "Version 3.1.2".

当我现在运行 "dotnet new angular" 并在 "this.currentCount++" 上设置断点时，断点被命中。

注意：当运行在 Chrome 以外的其他浏览器中使用客户端应用程序时，此问题可能仍然会发生。但我一直在使用 Chrome，无论是在我早些时候遇到问题时还是在今天看起来已经解决了。

Answer 1

Microsoft 在链接线程上的更新：

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

If you have either renamed/deleted the "ClientApp" directory within your Visual Studio project to be something else, OR

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.

我的解决方法是使用 VSCode 单独调试前端，这并不理想，但似乎是让它与 .net 核心和自定义项目结构一起工作的唯一方法

Answer 2

2018 年 8 月 29 日，Blair Wang 报告了此问题的解决方案：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/"

我直到今天 (2018-03-23) 才看到这个，当时我使用以下方法测试修复：

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

正在修复。截至今天，它还在 2019-09-09 上与 VS2017 v15.9.15 和 Vs2019 一起工作。

Answer 3

对于在使用 .Net Core 3.1 和 Angular/TypeScript 时遇到此问题的任何人，我的解决方案是在 app.Use() 行之前添加 app.UseSpaStaticFiles() Startup.cs配置方法：

// 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();
  }
});

最初，我在 app.Use 部分下面有 app.UseSpaStaticFiles() 语句，并收到了 "breakpoints set but not yet bound" 消息。这发生在 Visual Studio 2019 年。将中间件语句上移后，断点开始工作。（我认为这在我升级到 .Net Core 3 之前曾经有效，但我不确定。）

Typescript 指令错误：VS2017 中的 "Breakpoints set but not yet bound"

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

typescript

.net-core

visual-studio-2017

angular

spa-template