logo标签列表

为什么我在使用 NodeJS 17 及以上版本与 Angular 在 VSCode 中开发时突然出现了“无法读取源映射”的错误？

node.jsangularvisual-studio-codesource-maps
41

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

  • Angular: 13.1.1
  • NodeJS: 18.1.0
  • VSCode: 1.67.1

Launch.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
首先，要在尝试其他任何操作之前，确保遵循版本指南https://angular.io/guide/versions。 - undefined
12个回答
66

我实际上遇到了同样的问题（使用Angular 14和NX）。

调试器在node 16上可以工作，但在node 18上无法工作。

让它工作的方法是在package.json的启动脚本中添加标志'--host=127.0.0.1'。

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

我的 launch 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/*"
      }
    }

我的 tasks.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"
3
我降级到了 node 16 LTS，现在运行良好。 - Paul
10
按建议添加 --host=127.0.0.1 可以解决问题，我想知道为什么这样做有效！ - calebTree8475
3
我已经苦苦挣扎了数月无法解决这个问题，但终于找到了解决方案——谢谢！不过和calebTree8475一样，我真的很想知道在哪些Node版本之间发生了变化，导致出现了问题。 - Thiemo
3
它可以与node v18.12一起使用，谢谢！但是，您需要在launch json和tasks.json中添加以下行到package.json中： "start:frontend": "ng serve --host=127.0.0.1" - Cristian
2
确切地说，这是一个救命稻草。 - g.pickardou
显示剩余8条评论
11

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

使用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中的serve配置。
2
添加 resolveSourceMapLocations 会导致我无法触发断点。对于这个问题，我不确定那个解决方案是否可行。 - John
这对我来说简直就像魔法一样有效。 - Tom Stambaugh
10

我最近遇到了同样的问题，通过添加建议的代码行进行了解决：

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

这样做很有效。但是，每次我想要调试时都需要记住使用显式主机启动 ng。我运行了"ng version" 命令，突然报错说 Angular 不支持 Node.js v.18！

我卸载了 Node.js v.18 并安装了 v.16。这完全解决了问题。

10

看起来在node v18中，localhost解析为ipv6地址而不是v16中的ipv4地址。在浏览器中，localhost将解析为ipv4地址，而angular节点服务器会出错。

在v18上，您可以放置一个ipv6地址：

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

它应该能够工作

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

3
这应该是被接受的答案，因为它解释了这个错误背后的原因并直接处理了它。 - Yaroslav Larin
6

原因

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

这种行为变化在此问题票中被注意到："localhost" favours IPv6 in node v17, used to favour IPv4 #40537。该更改在"其他重要更改"下的更改日志中提到。

解决方案

您有几个选项：

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

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

  • 将您的VS Code调试启动配置更改为明确打开IPv6环回地址（[::1]）。

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

5

我的系统：Ubuntu 22，Node 18.11。

我找出了问题的原因，它取决于两个事情：Node 版本或主机 IP。

我切换到 Node 16.18，然后它就可以工作了。

这也不依赖于我的 launch.json 配置。"sourceMaps" 不是必需的：

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

另一种修复方法（使用 node 18）是修改 package.json：

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

改为：

"start": "ng serve",
终于有人告诉我在哪里放置“start”: “ng serve --host=127.0.0.1”了！所有人都说要将（“start”：“ng serve”）改为（“start”：“ng serve --host=127.0.0.1”）。但是没有人说它在哪里。lunch.js还是package.js还是其他地方？只有你知道。谢谢。 - reza hrkeng
你救了我，我已经很担心了。 - Sebastian Correa Zuluaica
2

我过去几年一直在同时进行 Angular 项目的工作，从版本 7 到最新版本都有涉及，我学到了一些东西。

我们使用的 Angular 和 Nodejs 版本必须保持一致。

请查看这个有关 Angular CLI、Angular、Node.js、TypeScript 和 RxJS 版本兼容性的有用答案。

2
如果您正在使用VSCode，可以关注此开放问题的线程。现在，由于VSCode中DNS解析回退逻辑中的错误，此问题仍然存在。
目前，将devserver强制为127.0.0.1是唯一的解决方法。
Github问题链接：https://github.com/microsoft/vscode/issues/167353 这个问题被表述为与Angular相关，但实际上是Webpack的devserver问题。
1

我将NodeJS降级至14.19.x版本，这解决了我的问题。

node 18 对我不起作用，现在降级到 node 16 就可以工作了。 - Paul
我不明白为什么有人要对这个答案进行负评。帖子明确说明了“...已经为我解决了问题”。也许你不喜欢它，但它可以帮助那些与Michael拥有相同配置的人。 - JoeCool-Avismón
1

修改文件设置对我没有起作用，但是使用以下命令运行应用程序解决了问题：

ng serve --host=127.0.0.1 --open
--open标志是可选的，当然。 - iulo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接