Debug lazy loaded Angular 2 module in Chrome / VS Code

Question

I am using WebPack with Angular 2/4 and are using modules that get lazy loaded. Therefore those modules and components are not included in the main .js file, the code resides in one of the files that WebPack generates counts up: 0.js, 1.js and so on.

My problem is that neither Chrome nor VS Code can debug code within those files for some reason. When I include the code to the main .js file, debugging works fine. Is there anything I can do about it?

Example:

I have a small directive that displays the local time in the HTML element. I use this directive in a component that get lazy loaded. When I try to debug the directive (or anything else that was lazy loaded) VS Code says the following:

Debugging is not possible in Chrome either. But if I use the directive in the root component (or anything else that is not lazy loaded) breakpoint are working in VS Code as well as in Chrome.

I tracked it down to the files WebPack is generating for the main client and the parts that are lazy loaded. Each chunk of lazy loaded components are located in files named 0.js, 1.js and so on - and I think here may be a cause of the problem.

MAP files

The map files for debugging are generated accordingly, this is my output:

I edited my post, I hope you can now understand better what my problem is about. — Tobias Punke
– Tobias Punke, Commented Sep 11, 2017 at 21:00

Drenai · Accepted Answer · 2018-04-06 11:59:41Z

3

I had the same problem. The breakpoints were hit in Angular using VSCode debugging in all my files/modules except the lazy loaded module.

There are two problems to address: 1) The latest Angular CLI breaks the debugging - this can be fixed by updating your launch.json - add the following:

"sourceMapPathOverrides": {
     "webpack:/*": "${webRoot}/*"
}

2) Add the debugger; command to some part of the code in the lazy loaded file you are trying to debug - once the debugger; line gets hit, all the breakpoints will start to work for the lazy loaded module

The first step can be ignored if your breakpoints are already working. The second step is a workaround, but should get the breakpoints working util we can figure out how to solve this properly!!

answered Apr 6, 2018 at 11:59

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhaval kansagara · Accepted Answer · 2017-09-12 06:14:33Z

0

Look like *.js.map file is not created.

If you are using angular CLI and fire ng build --prod it will build for production and *.js.map file is not generated if you run ng build --dev then it will generate *.js.map file.

If *.js.map file is generated then you can able to debug your js code.

answered Sep 12, 2017 at 6:14

Dhaval kansagara

5615 silver badges17 bronze badges

1 Comment

Tobias Punke Over a year ago

The map files are generated, I updated my post and added a screenshot of the output.

Sher Singh · Accepted Answer · 2021-07-07 07:35:58Z

Debugging in Angular-12 with VS-Code - Add these two files (launch.json and task.json) to the .vscode folder. short key for debugging in vscode Shift+Ctrl+D

**launch.json**
{
"version": "0.2.0",
"configurations": [
  // Based on: https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI
  {
    "name": "Launch ng serve & Chrome",
    "type": "pwa-chrome",
    "request": "launch",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200/",

    // Note: The ./client directory
    "webRoot": "${workspaceFolder}",
    
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "*",
      "/./~/*": "${webRoot}/node_modules/*"
    }
  },
]}  


**tasks.json**
{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "start",
        "isBackground": true,
        "presentation": {
          "focus": true,
          "panel": "dedicated"
        },
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "problemMatcher": {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": [
            "relative",
            "${cwd}"
          ],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "Compiled |Failed to compile."
            }
          }
        },
  
        "options": {
          // Note: The ./client directory
          "cwd": "${workspaceFolder}"
        },
  
      },
    ]
  }

Collectives™ on Stack Overflow

Debug lazy loaded Angular 2 module in Chrome / VS Code

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related