Typescript 指令出错：VS2017 中的“断点已设置但尚未绑定”答案

【问题标题】：Error on Typescript instruction: "Breakpoints set but not yet bound" in VS2017Typescript 指令出错：VS2017 中的“断点已设置但尚未绑定”
【发布时间】：2018-11-12 14:48:25
【问题描述】：

我用“dotnet new angular”创建了一个项目。当在 Typescript 指令上设置断点时，它在运行时显示为一个开放的红色圆圈。错误消息是“当前不会命中断点。已设置断点但尚未绑定。”

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

要重复问题，您可以在“this.currentCount++;”上设置断点在 ClientApp\src\app\counter\counter.component.ts 中点击“计数器”页面的“增量”。

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

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 中成功。

不同的是，当成功时，每个 SDK 在“dotnet new angular”期间在项目的根目录中生成文件“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 开发人员命令窗口中键入“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”会显示“版本 3.1.2”。

当我现在运行“dotnet new angular”并在“this.currentCount++”上设置断点时，会触发断点。

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

【问题讨论】：

我也有同样的问题。正在尝试创建一个 MVC .net Angular 项目。

标签： angular typescript visual-studio-2017 .net-core spa-template

【解决方案1】：

微软在链接线程上的更新：

Visual Studio 中的 Typescript 断点不适用于 ASP.NET 核心目前处于以下两种情况之一的项目：

如果您已将 Visual Studio 项目中的“ClientApp”目录重命名/删除为其他目录，或者

Typescript/JavaScript 文件位于不同的目录（ClientApp 除外）。

很遗憾，我们目前没有解决断点的方法 ClientApp 文件夹之外的打字稿文件。我们正在与 Visual Studio 中的相关团队进行相同的修复，但如果您受到此更改的影响，我建议您切换到在“ClientApp”文件夹中工作。

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

【讨论】：

您提到的两种情况都不是我的情况。正如我所说：“我用“dotnet new angular”创建了一个项目。这既使用“ClientApp”作为文件夹名称，也将所有 Typescript/JavaScript 文件放在该文件夹下。
@Guerrilla，+1 - 你能在这里看看我的类似问题吗：stackoverflow.com/questions/59211872/…

【解决方案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 年 9 月 9 日，它还在使用 VS2017 v15.9.15 和 Vs2019 运行。

【讨论】：

【解决方案3】：

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

// 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() 语句，并收到“已设置断点但尚未绑定”消息。这发生在 Visual Studio 2019 中。向上移动中间件语句后，断点开始工作。（我认为这在我升级到 .Net Core 3 之前可以正常工作，但我不确定。）

【讨论】：