VS Code + Chrome 调试 + nrwl 架构答案

【问题标题】：VS Code + Chrome debug + nrwl architectureVS Code + Chrome 调试 + nrwl 架构
【发布时间】：2020-06-26 08:38:58
【问题描述】：

您是否能够在使用 nx.dev 开发的 chrome 中调试应用程序？

https://nx.dev/angular

当您选择 NX 时，您似乎失去了调试功能。生成的 .map.js 文件包含源文件的相对路径，但缺少文件所在的两个初始目录，因此安装在 vs-code 内的 chrome 调试器无法绑定断点。

感谢您的帮助！

【问题讨论】：

标签： google-chrome debugging visual-studio-code nrwl nrwl-nx

【解决方案1】：

实际上设置 root:"",

有一个缺点

nx dep-graph 混淆并显示对错误应用的依赖关系。
nx g move --project folder/ 感到困惑并说一个或多个项目具有相同的根目录。

我推断这不是解决这个问题的最佳方法。

【讨论】：

我在 nx 工作区中有几个应用程序，每个都延迟加载库。我用这个来工作...... {“type”：“chrome”，“request”：“launch”，“name”：“Designer”，“url”：“localhost:4204”，“webRoot”：“ ${workspaceFolder}/apps/designer", "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot }/*", "webpack:///*": "", "webpack:///./~/": "${webRoot}/node_modules/*", "meteor: //?app/*": "${webRoot}/*" } },
您好阿兰，感谢您的意见。我同意缺点，因为它们也发生在我身上。希望这个主题应该在 NX 开发人员的关注范围内，并且他们会提出适当的解决方案。他们要么处理 launch.json 文件，要么修复 nx dev-graph 和 nx g move 的工作方式
@Alaind'Espaignet - 你描述的 launch.json 对我有用。感谢您找出 sourceMapPathOverrides！
这实际上不是问题的答案，它应该是对已接受答案的评论

【解决方案2】：

对我有用的是，您需要在 angular.json 中将项目的“根”属性设置为空字符串。

 "catalog": {
      "projectType": "application",
      "schematics": {
        "@nrwl/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "apps/catalog/catalog/src",

但请注意，这可能会破坏其他功能

【讨论】：

感谢您的回复。是的，这就是我所做的，而且效果很好。感谢您的准确回复
很高兴我能提供帮助，但老实说，不知道删除根路径有什么缺点...如果你找到了，请告诉我！