为什么我在使用 Angular 和 NodeJS 17 及更高版本的 VSCode 中突然收到“无法读取源映射”信息？

Question

我突然无法调试我的 Angular 应用程序。不太确定我做了什么。我更新node.js后可能会发生这种情况

• 角度：13.1.1
• NodeJS：18.1.0
• VS代码：1.67.1

启动.json

"configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
    },
  ]

错误：

Could not read source map for http://localhost:4200/runtime.js: Unexpected 503 response from http://127.0.0.1:4200/runtime.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/vendor.js: Unexpected 503 response from http://127.0.0.1:4200/vendor.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/main.js: Unexpected 503 response from http://127.0.0.1:4200/main.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/styles.js: Unexpected 503 response from http://127.0.0.1:4200/styles.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/polyfills.js: Unexpected 503 response from http://127.0.0.1:4200/polyfills.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/scripts.js: Unexpected 503 response from http://127.0.0.1:4200/scripts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_lora_lora_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_lora_lora_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_telegrams_telegrams_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_telegrams_telegrams_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_items-management_items-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_items-management_items-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_model-management_model-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_model-management_model-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_key-management_key-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_key-management_key-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js: Unexpected 503 response from http://127.0.0.1:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_gum_gum_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_gum_gum_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_biot_biot_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_biot_biot_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200

Answer 1

我实际上也遇到了同样的问题（将 Angular 14 与 NX 一起使用）。调试器可以在节点 16 上运行，但不能在节点 18 上运行。

使它起作用的原因是将标志“--host=127.0.0.1”添加到 package.json 中的启动脚本中。

"start": "ng serve --host=127.0.0.1"

我的启动 json：

 "version": "0.2.0",
  "configurations": [
    
    {
      "name": "Debug Frontend",
      "type": "pwa-chrome",
      "request": "launch",
      "preLaunchTask": "Serve Frontend",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/src/*",
        "/*": "*",
        "/./~/*": "${workspaceFolder}/node_modules/*"
      }
    }

我的任务.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Serve Frontend",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }
  ]
}

编辑：如果您使用 NX，则需要更改tasks.json 中的脚本名称以匹配您的package.json，并且需要将主机添加到package.json 中的启动脚本中：

"start:frontend": "nx serve frontend --host=127.0.0.1"

Answer 2

我在这里找到了一个更简单的解决方案。

对于 VSCode 1.74.0、Angular 14 和 NodeJS 18，我只需将该resolveSourceMapLocations属性添加到我的launch.json：

{
   "name": "Chrome debug",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "starter",
    "sourceMaps": true,
    "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
    ],
}

无需更新package.json服务配置。

Answer 3

我最近遇到了同样的问题，我可以通过添加建议行来解决这个问题：“start”：“ngserve --host=127.0.0.1”

有效。然而，每次我想要调试时，我都必须记住以显式主机启动 ng 。我运行“ng version”，突然命令抱怨 Angular 不支持 Node.js v.18！

我已卸载 Node.js v.18，然后安装 v.16。这已经彻底解决了问题。

Answer 4

看来在节点 v18 中 localhost 解析为 ipv6 地址，而不是 v16 中的 ipv4。在浏览器中，本地主机将解析为 ipv4，并且 Angular 节点服务器会出错。

在 v18 上，您可以输入 ipv6 地址：

"configurations": [
{
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "url": "http://[::1]:4200/"
},

它应该有效

https://github.com/nodejs/node/issues/40537

Answer 5

原因

--dns-result-orderNodeJS v17 中该标志的默认值从 更改ipv4first为verbatim。以下是进行更改的 PR：dns: default to verbatim=true in dns.lookup() #39987。

在此问题单中注意到了这种行为变化：“localhost”在节点 v17 中支持 IPv6，过去支持 IPv4 #40537。该更改在更改日志中的“其他值得注意的更改”下提到。

解决方案

您有几个选择：

• 检查你的主机文件。如果缺少::1 localhost，添加它可能会解决问题。

• 传递--dns-result-order=ipv4first到您的节点进程。

• 更改 VS Code 调试启动配置以显式打开 IPv6 环回地址 ( [::1])。

• ng serve在命令 ( )中明确指定所需的主机ng serve --host=127.0.0.1。

Answer 6

我的系统：Ubuntu 22，节点18.11

我发现，这取决于两件事：节点版本或主机IP

我切换到节点 16.18，它工作了。

这也不取决于我的launch.json配置。不需要“sourceMaps”：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

另一个修复（使用节点 18）是修改package.json：

"start": "ng serve --host=127.0.0.1",

代替：

"start": "ng serve",