VS Code: help debugging angular 2 with express

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

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.

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.

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"
      ]
    }
  ]
}

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.

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?

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. :)

via dvsoukup