Node.js VS代码：帮助使用express调试angular 2

我一直在尝试在VisualStudio代码中设置一个调试器来运行我的typescript，但已经有一段时间了。首先，这是我的项目结构：

├───.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”目录是运行my express server的目录

我的express服务器服务于“客户机”目录，它似乎工作正常。基本上整个应用程序运行良好。。。我可以调用在express中构建的RESTful端点，还可以导航到位于客户机目录根目录中的“index.html”。角度模块可以很好地装载所有这些东西

无论如何，问题是我希望能够从VisualStudio代码中调试所有angular typescript文件。以下是我当前的启动配置：

{
  "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代码的复合启动配置来有效地启动两个调试器。。。一个会击中我的“服务器端”代码，另一个会击中角度端。然而，在我的一生中，我无法让客户方工作。服务器端工作得很好，我可以在typescript中逐步完成我所有的RESTful端点等等。但是，无法单步执行“客户端”目录中的任何内容

已经花了无数个小时阅读调试设置并在互联网上搜索其他可能的解决方案。仍然没有运气：（不管怎样，有人能给我指出正确的方向吗？我如何设置“客户端”调试器来逐步通过angular应用程序

---

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

此配置最终对我有效

{
  "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

，以便根据@Mika571请求更新角度更改。这是安装程序中用于调试typescript文件的配置：

{
  "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代码中启用了chrome扩展的调试器。

我想做同样的事情，同时调试node/express和angular，但没有成功。你有棱角的东西被缩小了吗？我确实让这一切都运转起来了。将chrome调试器扩展与复合调试设置结合使用。效果很好。我现在可以从VS代码中调试所有内容。我只是缩小了我们生产环境的角度代码。否则，它只是所有的JS原样。那么，即使typescript代码已经缩小，您是否能够中断它？你有没有可能把你的设置作为答案？这将非常有帮助。我需要从使用AngularJS的同事那里挖掘源代码（我目前正在使用AngularJS…）。但我知道它是有效的。为了正确调试typescript，您需要确保启用了sourcemaps。这是生成的JS（即使缩小了…）和typescript文件之间的桥梁。我在答案中添加了一个设置供您查看。