VS Code + Chrome debug + nrwl architecture

user_5946819 0
Viewed 1688

Have you been able to debug an application in chrome developed using nx.dev?

https://nx.dev/angular

It looks like when you choose for NX you lose debugging capabilities. The generated .map.js files contains relative paths to source files but are missing the two initial directories where the files are located so the debugger for chrome installed inside vs-code is unable to bind breakpoints.

This is minimal code generated following instructions form link above

Thanks you for your help!

nrwl nrwl-nx visual-studio-code google-chrome debugging
2 Answers

Actually there is a downside to setting root:"",

  1. nx dep-graph gets confused and shows dependencies to the wrong app.
  2. nx g move --project folder/ gets confused and says one or more projects have the same root.

I deduce this is not the best way to solve this problem.

user_44254780

What worked for me, is that you need to set in your angular.json the "root" property of your project to an empty string. 

 "catalog": {
      "projectType": "application",
      "schematics": {
        "@nrwl/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "apps/catalog/catalog/src",

But be aware, this can break other functionalities

user_103646160
Related