How to debug an Angular CLI app with the custom webpack builder?

Question

I built a repo to expose my issue: https://github.com/franklin626/custom_webpack_undebuggable

This Angular CLI app has a custom webpack setup (webpack.config.js). It also has a .vscode/launch.json configuration to debug from VS Code upon either ng test (unit tests) or ng serve. I can place breakpoints for my unit tests, but not when running ng serve:

In my debug tab in VS Code, I run my "launch Chrome" routine followed by "attach localhost". I place a breakpoint on other.component.ts:14, and browse to localhost:4200/othermodule to fire up my lazy loaded module OtherModule containing OtherComponent.

I can't place a breakpoint on home.component.ts:13 either, even though it is in the default module.

VS Code complains the breakpoint can't be hit and suggests a possible problem with source maps. I can see the original sources are loaded in the browser though. What is going on ?

imgur.com/a/woy4MXn

nickbullock
– nickbullock

2020-05-18 07:47:08 +00:00
Commented May 18, 2020 at 7:47 — nickbullock
– nickbullock, Commented May 18, 2020 at 7:47

Radik · Accepted Answer · 2020-05-18 08:14:01Z

4

+400

you can add .vscode/tasks.json with label debug as follow

it will start build, launch chrome debug and watch for changes

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "debug",
      "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."
          }
        }
      }
    },
  ]
}

and modify .vscode/launch.json to use debug task as preLaunchTask

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome debug",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "debug",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

also move package to devDependencies

npm i -D @angular-builders/custom-webpack

pull request

https://github.com/franklin626/custom_webpack_undebuggable/pull/2

edited May 18, 2020 at 8:14

answered May 18, 2020 at 7:59

Radik

2,7931 gold badge23 silver badges26 bronze badges

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

2 Comments

BuZz Over a year ago

Awarding bounty as this answer was the most practical, it turns out VS Code was creating my .vscode folder in the wrong place...

minus one Over a year ago

Appreciated the solution with background! This is also the best answer for this question: link

nickbullock · Accepted Answer · 2020-05-19 18:58:51Z

1

This guide works for me with your repo, latest vscode and debugger for chrome.
Please see the results and follow these steps:

Install debugger for Chrome
Create .vscode/launch.json with the following content

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

Set a breakpoint in Home or Other component
Press F5 to start the debugger

answered May 19, 2020 at 18:58

nickbullock

6,62913 silver badges29 bronze badges

1 Comment

BuZz Over a year ago

Accepting this answer as it's the most canonical for other users in the future.

Collectives™ on Stack Overflow

How to debug an Angular CLI app with the custom webpack builder?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related