VS代码:使用Express帮助调试angular 2 [英] VS Code: help debugging angular 2 with express

问题描述

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

Have been trying to set up a debugger in Visual Studio Code to run against my typescript, but have been beating head on wall for some time now. First off, here is my project structure:

├───.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的所有内容，而服务器"目录则包含运行我的快速服务器的内容.

So basically I have gulp running, and transpiles typescript > javascript, as well as moves all resources (html, css, images, etc.) over to the "dist" directory. The "client" directory is what holds everything Angular2, while the "server" directory is what is running my express server.

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

I have my express server serving the "client" directory and it seems to work fine. Essentially the entire app runs fine... I can call my RESTful endpoints built out in express, and I can also navigate to my "index.html" located in the root of the client directory. Angular modules load fine and all that stuff.

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

Anyhow, the issue is that I would like to be able to debug all my angular typescript files from within visual studio code. Here is my current launch configuration:

{
  "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端点，而不能浏览所有RESTful端点.但是只是无法单步执行"client"目录中的任何内容.

I'm using VS Code's compound launch config to effectively launch two debuggers... one that will hit my "server side" code, and the other which would hit the angular side. However I can't for the life of me get the client side to work. The server side works great and I can step through all my RESTful endpoints and what not, right inside the typescript. However just can't step through anything within the "client" directory.

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

Have exhausted countless hours reading up on the debug settings and scouring the internet for other possible solutions. Still having no luck :( Anyhow, could someone point me in the right direction? How do I set up that "client" debugger to be able to step through the angular app?

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

I would like to be able to click a single button, that green "launch" button in VS Code, and be off and running. I'm a lazy programmer and don't like having to run multiple commands each time. :)

推荐答案

每个@ Mika571请求.这是我们的设置中用于调试打字稿文件的配置:

Per @Mika571 request. This is a config being used in our setup to debug typescript files:

{
  "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扩展程序调试器.

You also need to ensure you have debugger for chrome extension enabled within VS Code.

这篇关于VS代码:使用Express帮助调试angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！