VS Code：使用 express 帮助调试 Angular 2

Posted 2023-03-07

【中文标题】VS Code：使用 express 帮助调试 Angular 2

【英文标题】：VS Code: help debugging angular 2 with express

【发布时间】：2017-08-09 08:23:23

【问题描述】：

一直试图在 Visual Studio Code 中设置一个调试器来运行我的打字稿，但现在已经有一段时间了。首先，这是我的项目结构：

├───.vscode
├───dist
│   ├───client
│   │   └───app
│   │       ├───about
│   │       ├───home
│   │       ├───login
│   │       ├───_css
│   │       ├───_guards
│   │       ├───_helpers
│   │       ├───_models
│   │       └───_services
│   └───server
│       └───routes
└───src
    ├───client
    │   └───app
    │       ├───about
    │       ├───home
    │       ├───login
    │       ├───_css
    │       ├───_guards
    │       ├───_helpers
    │       ├───_models
    │       └───_services
    └───server
        └───routes

所以基本上我有 gulp 运行，并转换 typescript > javascript，以及将所有资源（html、css、图像等）移动到“dist”目录。 “client”目录包含 Angular2 的所有内容，而“server”目录是运行我的 express 服务器的目录。

我的快速服务器为“客户端”目录提供服务，它似乎工作正常。基本上整个应用程序运行良好......我可以调用内置于 express 中的 RESTful 端点，我还可以导航到位于客户端目录根目录中的“index.html”。 Angular 模块可以很好地加载和所有这些东西。

无论如何，问题是我希望能够从 Visual Studio 代码中调试我所有的 Angular 打字稿文件。这是我当前的启动配置：

  "configurations": [
    
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "$workspaceRoot/dist/server/startup.js",
      "sourceMaps": true,
      //"preLaunchTask": "default",
      "outFiles": [
        "$workspaceRoot/dist/**/*.js",
        "$workspaceRoot/dist/*.js"
      ],
      "env": 
        "NODE_ENV": "development"
      ,
      "protocol": "auto"
    ,
    
      "type": "node",
      "request": "attach",
      "name": "Client",
      "sourceMaps": true,
      "port": 5858,
      "address": "localhost",
      "restart": false,
      "localRoot": "$workspaceRoot/dist/client"
    
  ],
  "compounds": [
    
      "name": "Server/Client",
      "configurations": [
        "Server",
        "Client"
      ]
    
  ]

我正在使用 VS Code 的复合启动配置来有效地启动两个调试器……一个会命中我的“服务器端”代码，另一个会命中角端。但是，我一辈子都无法让 客户端 工作。服务器端工作得很好，我可以在打字稿中逐步完成我所有的 RESTful 端点和什么不是的。但是，无法单步执行“客户端”目录中的任何内容。

花费了无数小时阅读调试设置并在互联网上搜索其他可能的解决方案。仍然没有运气:(无论如何，有人能指出我正确的方向吗？我如何设置“客户端”调试器以便能够单步执行 Angular 应用程序？

我希望能够单击一个按钮，即 VS Code 中的绿色“启动”按钮，然后关闭并运行。我是一个懒惰的程序员，不喜欢每次都运行多个命令。 :)

【问题讨论】：

我想做同样的事情，并排调试节点/快递和角度但没有成功。你的棱角分明的东西被缩小了吗？

我确实让这一切正常工作。将 chrome 调试器扩展与复合调试设置结合使用。效果很好。我现在可以在 VS 代码中调试所有内容。我只是为我们的生产环境缩小角度代码。否则，它只是所有的 JS。

那么即使你的打字稿代码已经被缩小了，你还能断点吗？你有没有机会把你的设置作为答案？这会很有帮助。

我需要从一位正在使用 Angular 的同事那里挖掘源代码（我目前正在使用 AngularJS ......）。但我知道它有效。为了正确调试打字稿，您需要确保启用了源映射。这是生成的 JS（即使被缩小.​​..）和 typescript 文件之间的桥梁。

【参考方案1】：

这个配置最终对我有用。

  "version": "0.2.0",
  "configurations": [

    //node config
    
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeExecutable": "nodemon",
      "program": "$workspaceRoot/index.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    ,
    //angular config
    
      "type": "chrome",
      "request": "launch",
      "name": "Angular",
      "url": "http://localhost:3000/#",
      "webRoot": "$workspaceRoot"
    
  ],
  "compounds": [
    
      "name": "Compound",
      "configurations": ["nodemon", "Angular"]
    
  ]

唯一需要注意的是我需要在控制台中运行 ng build -w 以便更新我的角度变化。

【讨论】：

我在答案中添加了一个设置供您查看。

【参考方案2】：

根据@Mika571 的要求。这是我们设置中用于调试打字稿文件的配置：

  "configurations": [
    
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "$workspaceRoot/src/server/server.js",
      "sourceMaps": true,
      "outFiles": [
        "$workspaceRoot/dist/**/*.js",
        "$workspaceRoot/dist/*.js"
      ],
      "env": 
        "NODE_ENV": "development"
      ,
      "protocol": "auto"
    ,
    
      "name": "Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000/",
      "sourceMaps": true,
      "webRoot": "$workspaceRoot",
      "userDataDir": "$workspaceRoot/.vscode/chrome"
    
  ],
  "compounds": [
    
      "name": "Server/Client",
      "configurations": [
        "Server",
        "Client"
      ]
    
  ]

您还需要确保在 VS Code 中启用了 chrome 扩展的调试器。