Search code examples
google-chromedebuggingvisual-studio-codenrwlnrwl-nx

VS Code + Chrome debug + nrwl architecture


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!


Solution

  • 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