能否同时调试Angular SSR的server.ts、服务端/客户端代码并启用HMR？

完全可行，按以下步骤配置即可实现需求：

一、更新package.json脚本 #

替换原有脚本，添加支持调试与HMR的SSR命令：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:ssr": "ng build && ng run catalogo-sk:server",
  "serve:ssr:dev": "node --inspect-brk dist/catalogo-sk/server/server.mjs",
  "serve:ssr:hmr": "ng run catalogo-sk:serve-ssr --hmr"
}

• build:ssr：完整构建客户端与服务端代码
• serve:ssr:dev：启动带调试端口的Node服务，供VS Code附加调试
• serve:ssr:hmr：启用HMR的SSR启动命令

二、配置VS Code调试文件（.vscode/launch.json） #

创建或更新该文件，添加复合调试配置，同时启动客户端与服务端调试会话：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "SSR Server Debug",
      "program": "${workspaceFolder}/dist/catalogo-sk/server/server.mjs",
      "runtimeArgs": ["--inspect-brk"],
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js", "${workspaceFolder}/dist/**/*.mjs"]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Client Debug",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    }
  ],
  "compounds": [
    {
      "name": "Full SSR Debug (Client + Server)",
      "configurations": ["SSR Server Debug", "Client Debug"],
      "stopAll": true
    }
  ]
}

三、调试与HMR启用步骤 #

1. 先执行全量构建：

npm run build:ssr

2. 启动HMR模式的SSR服务：

npm run serve:ssr:hmr

3. 在VS Code调试面板选择Full SSR Debug (Client + Server)，点击启动调试。

四、验证断点有效性 #

• 服务端组件断点：在ngOnInit的isPlatformServer分支加断点，刷新页面时服务端渲染阶段会触发
• Node服务断点：在sitemap.xml接口代码加断点，访问http://localhost:4200/sitemap.xml即可触发
• 客户端代码断点：客户端执行的代码断点会在浏览器渲染阶段正常触发

注意事项 #

• 确保项目已正确配置SSR（已安装@angular/platform-server）
• angular.json中development配置的sourceMap需设为true
• HMR模式下修改代码会自动刷新，断点可保持有效

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