VS代码：使用Express帮助调试angular 2

Question

一直试图在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，并编译打字稿> javascript，并将所有资源（html，css，图像等）移到“ dist”目录中。“客户端”目录是Angular2的所有内容，而“服务器”目录是运行我的Express服务器的内容。

我的快递服务器为“客户端”目录提供服务，看来工作正常。本质上，整个应用程序运行良好...我可以调用Express中内置的RESTful端点，也可以导航到客户端目录根目录中的“ index.html”。Angular模块可以很好地加载所有东西。

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

{
  "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端点，而没有其他端点。但是只是不能单步执行“ client”目录中的任何内容。

花费了无数小时来阅读调试设置，并在Internet上搜索其他可能的解决方案。仍然没有运气:(无论如何，有人可以向我指出正确的方向吗？如何设置该“客户端”调试器以能够逐步通过有角度的应用程序？

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

Answer 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在控制台中运行，以便更新我的角度变化。