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

luchsamapparat commented 5 years ago

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

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/]

install the Debugger for Chrome extension for VS Code
add launch.json

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

start the application via npm start
set break points in apps\nx-source-map-issue\src\app\app.component.ts and libs\foo\src\lib\foo.module.ts
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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

Is this perhaps related and fixes the issue?

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

it‘s part of @angular-devkit/build-angular@0.802.0

rsrgithub commented 4 years ago

@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/build-angular@0.802.0, I could debug the code in VS code. Thanks a lot!

rarmatei commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

vscode version: 1.49.2 nx version: 10.1.0

fsmikedev commented 2 years ago

Me too, very frustrating. vscode version 1.60.1 nx version: 12.9.0

Elte156 commented 2 years ago

I was having this issue (breakpoints no longer working after upgrading from NX10 to NX13) and wanted to share my solution.

What I noticed in Chrome Debugger

Webpack Paths in Angular10 / NX10:

webpack:///./src/app/sample.component.ts
webpack:///./src/app/routing.module.ts

Webpack Paths in Angular12 / NX13:

webpack:///./apps/frontend/src/app/sample.component.ts
webpack:///./apps/frontend/src/app/routing.module.ts

Initially I had my Angular10 / NX10 launch.json file looking like this:

    {
      "name": "Debug Chrome",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}/apps/frontend",
    }

Because the webpack paths had adjusted with the apps/frontend prefix, I had to modify my Angular12 / NX13 launch.json file to this:

    {
      "name": "Debug Chrome",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
    }

Ensure workspace.json/angular.json has the option "sourceMap": true for your development configurations. When you nx serve, ensure that your development configurations are infact being used.

Areen3 commented 2 years ago

Thans, I try it ...

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx