How can I get vs code debugger to find map files for debugging angular-cli webpack project - debugging

Question

I am working on an angular-cli v1.0.5 (angular 4) project. Below is the output of the ng -v command.
#angular/cli: 1.0.5
node: 6.10.3
os: win32 x64
#angular/common: 4.1.3
#angular/compiler: 4.1.3
#angular/core: 4.1.3
#angular/forms: 4.1.3
#angular/http: 4.1.3
#angular/platform-browser: 4.1.3
#angular/platform-browser-dynamic: 4.1.3
#angular/router: 4.1.3
#angular/cli: 1.0.5
#angular/compiler-cli: 4.1.3
I am also using;
Typescript version 2.3.4
Webpack version 2.2.1
Chrome Version 58.0.3029.110 (64-bit)
Windows 10
VS Code version 1.13.0
Debugger for Chrome version 3.1.2
I am trying to get debugging to work in VS Code but all of my breakpoints are dimmed and when I hover over them, I get the message "Breakpoint ignored because generated code was not found."
Directory Structure - My project starts in the masclient folder. This is where my package.json and angular-cli.json files are at. Within the masclient folder, I have a src folder and within the src folder, I have an app folder. My angular 4 app.module.ts is in this folder. All of my components are in their own folders below the app folder. The specific typescript file I am trying to debug is in the masclient\src\app\bulk-labels\create-bulk-labels folder
My launch.json file is shown below;
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"diagnosticLogging": false,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
},
{
"name": "AttachChrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
My angular-cli.json is shown below;
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "masclient"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "masc",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles/vendor.scss",
"styles/main.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
My tsconfig.json file is shown below;
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2016",
"dom"
]
}
}
I have gone through several recommendations I have found on Google with no luck. Most seem to refer to the process before angular-cli switched to webpack. There seem to be a lot of variation of property settings in the launch.json file. As I read through the posts before deciding to post my own question here, it seems that the issue may be related to the fact that the ng serve process keeps all of the compiled files in memory rather than pulling the map files from a ./dist folder... but I am not sure how that would change the location settings in the launch.json file.
I start debugging using the following process;
Run ng serve from the command line to start the web server
From within VS Code, I go to the Debug section and click on the green arrow next to "Launch Chrome" ( or press F5)
I have also tried this process;
Run ng serve from the command line to start the web server
Launch chrome.exe --remote-debugging-port=9222 from an admin level command prompt.
In the instance of Chrome that launched, navigate to locaohost:4200
From within VS Code, I go to the Debug section and click on the green arrow next to "Launch Chrome" ( or press F5)
With either of the startup methods listed above, wile viewing my source code *.ts files in the VS Code editor, I can see that my breakpoints are grayed out as soon as the debugger starts.
I am sure it probably just a matter of getting my settings in the various config files synced properly, but after several hours of research, the actual solution has eluded me.
Any help would be greatly appreciated.