Breakpoint debugging does not work in NS7

[rbudnar]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: NativeScript CLI: 7.0.8
• Cross-platform modules:
• Android Runtime: 7.0.0
• iOS Runtime: n/a
• Plugin(s):
• VSCode: 1.49.1

Here's my package.json (default for new project)

``` { "name": "@nativescript/template-hello-world-ng", "main": "main.js", "version": "7.0.2", "author": "NativeScript Team ", "description": "NativeScript Application", "license": "SEE LICENSE IN ", "publishConfig": { "access": "public" }, "keywords": [ "nativescript", "mobile", "angular", "{N}", "template" ], "repository": "", "bugs": { "url": "https://github.com/NativeScript/NativeScript/issues" }, "scripts": { "ngcc": "ngcc --properties es2015 module main --first-only", "postinstall": "npm run ngcc" }, "dependencies": { "@angular/animations": "~10.1.0", "@angular/common": "~10.1.0", "@angular/compiler": "~10.1.0", "@angular/core": "~10.1.0", "@angular/forms": "~10.1.0", "@angular/platform-browser": "~10.1.0", "@angular/platform-browser-dynamic": "~10.1.0", "@angular/router": "~10.1.0", "@nativescript/angular": "~10.1.0", "@nativescript/core": "~7.0.0", "@nativescript/theme": "~2.3.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.6.0", "zone.js": "~0.11.1" }, "devDependencies": { "@angular/compiler-cli": "~10.1.0", "@nativescript/android": "7.0.0", "@nativescript/types": "~7.0.0", "@nativescript/webpack": "~3.0.0", "@ngtools/webpack": "~10.1.0", "typescript": "~3.9.0" }, "private": "true", "readme": "NativeScript Application" } ```

Describe the bug

Breakpoint debugging no longer works when upgrading to NS7. I see the following when setting a breakpoint in VS code:

This was in a brand new sample app as well as after attempting to upgrade my current app.

To Reproduce

1. Create a new nativescript app after upgrading the CLI. ns create sampleapp --ng
2. Open sample app, add a launch config for nativescript and run the app.
3. Once the app is running, set a breakpoint anywhere and test. Note that debugging does not work.

Expected behavior We should be able to debug NS7 applications.

Sample project

Run ns create sampleapp --ng with the updated CLI.

Additional context

I'm not sure if this the right place for this issue, since it might be something webpack related. My apologies if so.

[rbudnar]

I think this is probably better suited to the main repo, so I'm closing this and reposting there.

[rob4226]

@rbudnar @ErjanGavalji @darind @jasssonpet @paynechu I have the same problem with NativeScript Angular projects. Regular plan JavaScript projects word as expected but with Angular I get the generated code not found. I think I see the issue, if you look in the debug console the path the source files has app/app in it when it should be src/app for example with the HelloWorld project the vscode debugger says the path is: e:/my-projects/ns-angular-project/app/app/item/item-detail.component.ts when it should be: e:/my-projects/ns-angular-project/src/app/item/item-detail.component.ts I am trying to look through the extension source code to fix it but haven't figured it out yet. Does anyone have any ideas?? Thanks.

[rob4226]

@rbudnar @ErjanGavalji @darind @jasssonpet @paynechu I have the same problem with NativeScript Angular projects. Regular plan JavaScript projects word as expected but with Angular I get the generated code not found. I think I see the issue, if you look in the debug console the path the source files has app/app in it when it should be src/app for example with the HelloWorld project the vscode debugger says the path is: e:/my-projects/ns-angular-project/app/app/item/item-detail.component.ts when it should be: e:/my-projects/ns-angular-project/src/app/item/item-detail.component.ts I am trying to look through the extension source code to fix it but haven't figured it out yet. Does anyone have any ideas?? Thanks.

I figured it out and fixed it! 😃 I am going to submit a pull request. I added a check for an "angular.json" file in the base of the project in order to determine if it is an Angular based project, if it is the appDirPath is changed to src from app. For other projects it is left as "app" because plain JavaScript projects were working fine already.

I can't believe what I was missing not being able to debug directly in my source files in vscode with NativeScript Angular projects! This is going to save me so much time and aggravation without needing to console.log everything.

Update Here is the pull request I submitted #279. It works great for me now and if you want to give it a try I'll post a link to share a build of the extension. All you have to do is go to the extension menu in vscode and click "install from vsix file" then choose the extension file downloaded from here..