Unable to set breakpoints in VS Code to debug

[joshcomley]

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior Launching from VS Code works, but breakpoints cause an error to be displayed and are not hit:

Error: ENOENT: no such file or directory, open 'd:\Code\SubFolder\NgSeedAdvancedX\nativescript\app\app\components\about\data:application\json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9jb21wb25lbnRzL2Fib3V0L2Fib3V0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsc0NBQW9EO0FBQ3BELGtEQUFrRDtBQVVsRCxJQUFhLGNBQWM7SUFlekIsd0JBQW9CLFFBQWtCO1FBQWxCLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDcEMsNkJBQTZCO1FBQzdCLG1CQUFtQjtRQUNuQixzQ0FBc0M7UUFDdEMsSUFBSTtJQUNOLENBQUM7SUFmRCxzQkFBWSxnQ0FBSTthQUFoQjtZQUNFLEVBQUUsQ0FBQyxDQUFDLGNBQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO2dCQUNyQixFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO29CQUNoQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLGNBQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztnQkFDbkQsQ0FBQztnQkFFRCxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNwQixDQUFDO1FBQ0gsQ0FBQzs7O09BQUE7SUFRSCxxQkFBQztBQUFELENBckJBLEFBcUJDLElBQUE7QUFyQlksY0FBYztJQVIxQixnQkFBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLE1BQU0sQ0FBQyxFQUFFO1FBQ25CLFFBQVEsRUFBRSxVQUFVO1FBQ3BCLFdBQVcsRUFBRSxzQkFBc0I7UUFDbkMsU0FBUyxFQUFFO1lBQ1QscUJBQXFCO1NBQ3RCO0tBQ0YsQ0FBQztxQ0FnQjhCLGVBQVE7R0FmM0IsY0FBYyxDQXFCMUI7QUFyQlksd0NBQWMiLCJmaWxlIjoiYXBwL2NvbXBvbmVudHMvYWJvdXQvYWJvdXQuY29tcG9uZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0b3IsIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb25maWcgfSBmcm9tICcuLi8uLi9tb2R1bGVzL2NvcmUvaW5kZXgnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgbW9kdWxlSWQ6IG1vZHVsZS5pZCxcclxuICBzZWxlY3RvcjogJ3NkLWFib3V0JyxcclxuICB0ZW1wbGF0ZVVybDogJ2Fib3V0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFtcclxuICAgICdhYm91dC5jb21wb25lbnQuY3NzJyxcclxuICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQWJvdXRDb21wb25lbnQge1xyXG5cclxuICAvLyBKdXN0IG9uZSB3YXkgeW91IGNvdWxkIGhhbmRsZSB0aGUge059IGB1aS9wYWdlYCBQYWdlIGNsYXNzXHJcbiAgLy8gaW4gYSBzaGFyZWQgY29tcG9uZW50Li4uXHJcbiAgcHJpdmF0ZSBfcGFnZTogYW55O1xyXG4gIHByaXZhdGUgZ2V0IHBhZ2UoKSB7XHJcbiAgICBpZiAoQ29uZmlnLlBhZ2VDbGFzcykge1xyXG4gICAgICBpZiAoIXRoaXMuX3BhZ2UpIHtcclxuICAgICAgICB0aGlzLl9wYWdlID0gdGhpcy5pbmplY3Rvci5nZXQoQ29uZmlnLlBhZ2VDbGFzcyk7XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIHJldHVybiB0aGlzLl9wYWdlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IpIHtcclxuICAgIC8vIFRoaXMgaXMgaGVyZSBhcyBhbiBleGFtcGxlXHJcbiAgICAvLyBpZiAodGhpcy5wYWdlKSB7XHJcbiAgICAvLyAgIHRoaXMucGFnZS5hY3Rpb25CYXJIaWRkZW4gPSB0cnVlO1xyXG4gICAgLy8gfVxyXG4gIH1cclxufVxyXG4iXX0='

Expected behavior Breakpoints to set and be hit.

Minimal reproduction of the problem with instructions

1. Clone repo
2. Run npm run start.android.device
3. Run tns platform remove android
4. Open the nativescript subfolder in VS Code
5. Select "Launch on Android Device"
6. Try to set a breakpoint and observe error popup in VS Code. Breakpoint will also not be hit

Steps 2 and 3 are a workaround for the fact that on a fresh clone of the repo right now, running straight from VS Code results in a No such file or directory error from node-sass.

What is the motivation / use case for changing the behavior? Want to debug in VS Code

Please tell us about your environment:

• Latest VS Code (as of writing)
• Windows 10 x64
• NPM 5.0.3 (have tried lower versions)
• Node 8.1.4 (have tried lower versions)
• Android devices (various)
• Angular Seed Version 6e7a949

[joshcomley]

The decoded base64 is as follows:

{
"version":3, "sources":[
"app/components/about/about.component.ts" ], "names":[

], "mappings":";AAAA,sCAAoD;AACpD,kDAAkD;AAUlD,IAAa,cAAc;IAezB,wBAAoB,QAAkB;QAAlB,aAAQ,GAAR,QAAQ,CAAU;QACpC,6BAA6B;QAC7B,mBAAmB;QACnB,sCAAsC;QACtC,IAAI;IACN,CAAC;IAfD,sBAAY,gCAAI;aAAhB;YACE,EAAE,CAAC,CAAC,cAAM,CAAC,SAAS,CAAC,CAAC,CAAC;gBACrB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,cAAM,CAAC,SAAS,CAAC,CAAC;gBACnD,CAAC;gBAED,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YACpB,CAAC;QACH,CAAC;;;OAAA;IAQH,qBAAC;AAAD,CArBA,AAqBC,IAAA;AArBY,cAAc;IAR1B,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,sBAAsB;QACnC,SAAS,EAAE;YACT,qBAAqB;SACtB;KACF,CAAC;qCAgB8B,eAAQ;GAf3B,cAAc,CAqB1B;AArBY,wCAAc", "file":"app/components/about/about.component.js", "sourcesContent":[
"import { Injector, Component } from '@angular/core';\r\nimport { Config } from '../../modules/core/index';\r\n\r\n@Component({\r\n moduleId: module.id,\r\n selector: 'sd-about',\r\n templateUrl: 'about.component.html',\r\n styleUrls: [\r\n 'about.component.css',\r\n ],\r\n})\r\nexport class AboutComponent {\r\n\r\n // Just one way you could handle the {N} ui/page Page class\r\n // in a shared component...\r\n private _page: any;\r\n private get page() {\r\n if (Config.PageClass) {\r\n if (!this._page) {\r\n this._page = this.injector.get(Config.PageClass);\r\n }\r\n\r\n return this._page;\r\n }\r\n }\r\n\r\n constructor(private injector: Injector) {\r\n // This is here as an example\r\n // if (this.page) {\r\n // this.page.actionBarHidden = true;\r\n // }\r\n }\r\n}\r\n" ] }

It was fairly obvious it would be some kind of breakpoint mapping, but how can I fix this? Obviously the file doesn't exist, it seems to be an ambient reference of some kind to a virtual file containing the source mappings. I've tried changing "inlineSourceMap" to "sourceMap" in the tsconfig files, but no luck.