无法在 ClientApp 子文件夹中的 angular 8.0 应用程序的 asp.net 核心项目中的任何断点处停止

Posted 2023-03-13

【中文标题】无法在 ClientApp 子文件夹中的 angular 8.0 应用程序的 asp.net 核心项目中的任何断点处停止

【英文标题】：Unable to stop at any breakpoint in a asp.net core project with angular 8.0 app in subfolder inside ClientApp

【发布时间】：2019-12-03 19:11:34

【问题描述】：

文件夹结构为： https://i.stack.imgur.com/SIMcy.png

我要设置断点的应用在clientapp\apps\microsympan\app\src\app\app.component.ts中

如果我使用 Visual Studio 代码运行并将启动，json 设置为： "webRoot": "$workspaceFolder/apps/microsympan/app" 我可以设置断点并命中

在我设置的视觉工作室中 1) 在 Startup.cs 中

app.UseSpa(spa => 
        spa.Options.SourcePath = "ClientApp/apps/microsympan/app";
        if (env.IsDevelopment())  spa.UseAngularCliServer(npmScript: "start microsympan") 
      );

2) 在 csproj 中 clientapp\apps\microsympan\app

但没有运气。除非我在 Chrome 中设置断点然后被命中并在 Visual Studio 中显示文件副本，但我无法在 Visual Studio 中设置断点并被命中。

这是配置变量的错误/运气还是有解决方案？

提前致谢

【问题讨论】：

我如何告诉 Visual Studio Angular 项目文件夹在 ClientApp 内部但更深 3 个文件夹 (ClientApp/apps/microsympan/app) ？请看结构here

【参考方案1】：

您必须为您的 Visual Studio 进行设置才能调试 TS 代码。默认情况下，Visual Studio 不会为您启用

你可以看看here和here。

小步走上去

使用 tsconfig.json 文件配置源映射 如果将 tsconfig.json 文件添加到项目中，Visual Studio 会将目录根视为 TypeScript 项目。要添加文件，请在解决方案资源管理器中右键单击您的项目，然后选择添加 > 新项目 > Web > 脚本 > TypeScript JSON 配置文件。如下所示的 tsconfig.json 文件将添加到您的项目中。

  "compilerOptions": 
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  ,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]

tsconfig.json 的编译器选项

inlineSourceMap：使用源映射而不是发出单个文件 为每个源文件创建一个单独的源映射。 inlineSources：在单个文件中与源映射一起发出源；需要设置 inlineSourceMap 或 sourceMap。 mapRoot：指定调试器应查找源映射 (.map) 文件的位置，而不是默认位置。如果运行时 .map 文件需要位于与 .js 文件不同的位置，请使用此标志。指定的位置嵌入在源映射中，以将调试器定向到 .map 文件的位置。 sourceMap：生成对应的.map文件。 sourceRoot：指定调试器应该找到 TypeScript 文件的位置，而不是源位置。如果运行时源需要位于与设计时位置不同的位置，请使用此标志。指定的位置嵌入在源映射中，以将调试器定向到源文件所在的位置。

使用项目设置配置源映射 您还可以使用项目属性配置源映射设置，方法是右键单击项目，然后选择

Project > Properties > TypeScript Build > Debugging.

这些项目设置可用。

生成源地图（相当于tsconfig.json中的sourceMap）：生成对应的.map文件。 指定源地图的根目录（相当于 tsconfig.json 中的 mapRoot）：指定调试器应该找到地图文件的位置，而不是生成的位置。如果运行时 .map 文件需要位于与 .js 文件不同的位置，请使用此标志。指定的位置嵌入在源映射中，以将调试器定向到映射文件所在的位置。 指定 TypeScript 文件的根目录（相当于 tsconfig.json 中的 sourceRoot）：指定调试器应该找到 TypeScript 文件的位置，而不是源位置。如果运行时源文件需要位于与设计时位置不同的位置，请使用此标志。指定的位置嵌入在源映射中，以将调试器定向到源文件所在的位置。

【讨论】：

感谢您的回答，但我没有您描述的问题。我有一个可以正确调试的正在运行的项目。随着项目变得越来越大，我决定使用 nx.dev 的 monorepo 方法，所有项目都在同一个根文件夹和存储库中，但现在我无法调试，因为文件夹结构发生了变化。我尝试了任何方法，但我无法弄清楚 VisualStudio 想要的配置。

可以使用visual studio code或者angular ide来调试。在进行客户端调试时，我不是 Visual Studio 的忠实粉丝：D