如何使用新构建系统调试Angular 17服务端代码？

Angular 17切换到esbuild构建系统后，原有的dev:ssr命令被整合到ng serve --ssr中，但ng serve不直接支持--inspect参数，以下是几种可行的调试方案：

方案一：修改package.json脚本 #

在项目的package.json中添加专门的调试脚本：

"scripts": {
  "serve:ssr:debug": "node --inspect node_modules/@angular/cli/bin/ng serve --ssr"
}

执行命令启动调试：

npm run serve:ssr:debug

如果需要启动时就暂停在入口断点，可改用--inspect-brk：

"serve:ssr:debug": "node --inspect-brk node_modules/@angular/cli/bin/ng serve --ssr"

方案二：直接执行node命令 #

无需修改配置，直接在终端运行：

node --inspect node_modules/@angular/cli/bin/ng serve --ssr

同样，用--inspect-brk可以强制在启动时暂停，方便捕获初始化阶段的代码。

方案三：VS Code调试配置 #

在.vscode/launch.json中添加如下配置，实现一键启动调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Angular SSR Debug",
      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
      "args": ["serve", "--ssr"],
      "runtimeArgs": ["--inspect"],
      "console": "integratedTerminal"
    }
  ]
}

保存后，在VS Code的调试面板选择"Angular SSR Debug"启动即可。

启动后，你可以通过Chrome浏览器访问chrome://inspect，或者在VS Code中附加到Node.js进程（默认端口9229），开始调试服务端代码。

内容的提问来源于stack exchange，提问作者Nazir