Nx: break points in VS Code not working for application, invalid source map path

[luchsamapparat]

Expected Behavior

Using the Debugger for Chrome extension for Visual Studio Code I should be able to set breakpoints in my apps as well as in my libraries.

Current Behavior

When setting a breakpoint in an app, the breakpoint is ignored. Setting a breakpoint in a library however works.

Failure Information (for bugs)

Steps to Reproduce

1. create a new workspace with angular application and library:

> create-nx-workspace nx-source-map-issue
? Which stylesheet format would you like to use? CSS
? What is the npm scope you would like to use for your Nx Workspace? foo
? What to create in the new workspace (You can create other applications and libraries at any point using 'ng g') angular           [a workspace with a single Angular application]

> ng g lib foo                                                                                                                                        ? In which directory should the library be generated?
? What framework should this library use? Angular    [ https://angular.io/             ]
? Which stylesheet format would you like to use? CSS
? Which tags would you like to add to the library? (used for linting)
? Which Unit Test Runner would you like to use for the library? Jest [https://jestjs.io/]

1. install the Debugger for Chrome extension for VS Code

2. add launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

1. start the application via npm start

2. set break points in apps\nx-source-map-issue\src\app\app.component.ts and libs\foo\src\lib\foo.module.ts

3. press F5 to debug via Chrome

Context

Please provide any relevant information about your setup:

• version of Nx used: 7.8.1
• version of Angular CLI used: 7.3.1
• angular.json configuration: as generated
• version of Angular DevKit used: 0.13.0 (build-angular)
• and most importantly - a use-case that fails

Here's a project setup the same way as described above:

https://github.com/luchsamapparat/nx-source-map-issue

I added two constructors in apps\nx-source-map-issue\src\app\app.component.ts and libs\foo\src\lib\foo.module.ts where a breakpoint can be set.

Other

When using debugger statements, the Chrome actually stops at the app break point.

As you can see, the source map puts the file in src/app/app.component.ts.

When looking at the Sources tab in the Chrome Dev Tools, you see that the app is put somewhere else than the library:

[Trakhan]

Hi I am currently facing the same issue.

I managed to resolve it by setting the webRoot property in launch.json to the root path of launched project.

{ "type": "chrome", "request": "launch", "name": "Launch my-app in Chrome", "url": "http://localhost:4301", "webRoot": "${workspaceFolder}/apps/my-app" },

The libraries work only because they have absolute path in webpack circumventing the webRoot setting.

[rsrgithub]

I am also seeing the same issue. Breakpoints are not being hit. I have 2 Angular app and 2 libs in NX workspace. Breakpoint tooltip says - "unverified breakpoint". I did try "webRoot": "${workspaceFolder}/apps/my-app" but it did not solve the problem.

Any solution?

[luchsamapparat]

Is this perhaps related and fixes the issue?

https://github.com/angular/angular-cli/commit/0224d2b92eda628a7edd0797d194e509953f67bb

it‘s part of @angular-devkit/[email protected]

[rsrgithub]

@luchsamapparat Yes, that leading slash [ / ] in the webpack source map mapping was the issue which was caused by the issue mentioned by you. After upgrading the version of @angular-devkit/[email protected], I could debug the code in VS code. Thanks a lot!

[rarmatei]

Nx is now using "@angular-devkit/build-angular" version "~0.901.0" - can you please update to the latest Nx, check again and create a new issue if this is still a problem? I'll close this for now.

[instantgis]

I am using
"@angular-devkit/build-angular": "0.1000.4",
and still have the problem.
If I do this in launch.json for my designer app
{
"type": "chrome",
"request": "launch",
"name": "Designer",
"url": "http://localhost:4204",
"webRoot": "${workspaceFolder}/apps/designer"
},
Then breakpoints in the app designer fire.
But breakpoint in libs referenced by the app no longer fire.
setting root:"" in angular.json makes breakpoints work
but
makes ng dep-graph confused - more than one app using same path
and
nx g move also does not know what to move when moving libs

[Areen3]

it works for me

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"pathMapping": {},
"sourceMapPathOverrides": {
// a relative reference points to all files in the application directory
"webpack:///./": "${webRoot}/"
}
}
]
}

I have one app and many libs, brekpoits works fine
my sources in chrome looks like:

[lucashfreitas]

Same problem here. Can't get to debug nodejs projects using NX.

vscode version: 1.49.2
nx version: 10.1.0