Angular-cli: SourceMap mapping webpack to wrong file location in VSCode Debug

[pderks]

OS: Windows 10
angular-cli: 1.0.0-beta.16
node: 6.7.0

When creating a new project using the angular-cli and attempting to debug, none of the breakpoints I am setting are being hit. After looking into the log file for the debugger I have found that webpack is mapping to the wrong source location. I have listed repro steps along with the location of a log file, my launch configurations and an example of what I am seeing when I say that webpack is mapping to the wrong location. I was hoping someone had some insight into why this is happening.

Repro steps:

1. Download Debugger for Chrome in VS Code
2. Create new project using angular-cli
3. Set Launch.json configurations to launch in chrome with diagnosticLogging set to true
4. Set breakpoints in typescript files and Launch the app
5. Log file can be found at C:\Users{{your username}}.vscode\extensions\msjsdiag.debugger-for-chrome-0.5.2\vscode-chrome-debug.txt

Example from the log (entire log file attached):
vscode-chrome-debug.txt

SourceMap: mapping webpack:///C:/Users/pderks/Desktop/test-app/src/app/app.component.ts => c:\Users\pderks\Desktop\test-app\C:\Users\pderks\Desktop\test-app\src\app\app.component.ts

**Notice that the path c:\Users\pderks\Desktop\test-app is appearing twice.

Launch configurations:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"diagnosticLogging": true,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}

[sdiprizio]

Thanks to your comment I finally succeeded in debugging an angular-cli (1.0.0-beta.16 with webpack) generated app in vscode.

You need to remap webpack:///* in launch.json.

Here's my lauch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            /*"diagnosticLogging": true,*/
            "webRoot": "${workspaceRoot}",
            "url": "http://localhost:4200/*",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }
    ]
}

diagnosticLogging is optional (very verbose and hard to read in vscode console, the best is to read ~/.vscode/extensions/msjsdiag.debugger-for-chrome-0.5.2/vscode-chrome-debug.txt and search relevant info in any text editor).

Hope this helps.

[yuri1969]

@sdiprizio Thanks, it seems to be detecting the source maps for the bundle now. Although, it still can't hit a single _breakpoint_ in _VSCode_.

[duncanhunter]

Thanks @sdiprizio this works for me.

@yuri1969 I found I needed to make sure I only had one chrome tab open for this to work.

[pderks]

@sdiprizio Thanks! After mapping wepack to the correct location I was able to hit break points when navigating to different areas my site. I thought I'd note though that I had to change the override to map like this:

"sourceMapPathOverrides": {
"webpack:///C:/Users/{{username}}/Dekstop/test-app/_": "C:/Users/{{username}}/Desktop/test-app/_"
}

[yuri1969]

OK, the key was analysis of the ~/.vscode/extensions/msjsdiag.debugger-for-chrome-<version>/sourceMapPathOverride.txt logfile.

You have to tweak the sourceMapPathOverrides in launch.json until you see the mappings themselves in the logfile. Eg.:

SourceMap: mapping => , via sourceMapPathOverrides entry - "

It seems the problem, in my case, are Windows path delimiters vs. URL ones. The webpack path looks like: webpack:///c:/foo/bar/angular-project, although ${workspaceRoot} is: c:\foo\bar\angular-project. Thus there is a mismatch in the separators which can be worked-around by hardcoding the webpack path.

My final setup:

{
          "name": "Launch Chrome against localhost, with sourcemaps",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200/",
          "sourceMaps": true,
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": {
              "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
          }
 }

[jorgeas80]

The file vscode-chrome-debug.txt isn't generated in my case at that directory, but applying the launch.json @sdiprizio wrote, it worked for me. And I also had to make sure I only had one chrome tab open for this to work, like @duncanhunter

[rodries]

In Windows with

             "sourceMapPathOverrides": {
                 "webpack:///C:*":"C:/*"
             }

is enough.

Also I recommend add:
"userDataDir": "C:\\temp\\chromeDummyDir",
So a new chrome instance will be open with debug enabled

And change the WebRoot
"webRoot": "${workspaceRoot}/src",

Another tip

"runtimeArgs": [
                "--disable-session-crashed-bubble",
                "--disable-infobars"
            ],

Now the message "Chrome didn't shut down correctly" will be disabled

[cgatian]

@rodries were you able to get this to work with webpack-dev-server?

[jmesa-sistel]

@cgatian if you mean "ng serve" command then yes.
Run ng serve, then adjust vs code configuration with the proposed changes (select debug with Chrome).
Now you can debug without problems (at least in my case)

[filipesilva]

Great investigation work everyone! This has been an outstanding issue for a while now so I appreciate the effort that has gone into figuring out solutions.

The override seems to work, but if this is fixable within the CLI we'd like to do it. Off the top of my head it sounds like a VSCode Chrome debugger problem because:

• source maps appear to be working correctly in chrome
• this mapping (done by the debugger) shows some kind of broken mapping:

SourceMap: mapping webpack:///C:/Users/pderks/Desktop/test-app/src/app/app.component.ts => 
c:\Users\pderks\Desktop\test-app\C:\Users\pderks\Desktop\test-app\src\app\app.component.ts

In this issue https://github.com/Microsoft/vscode-chrome-debug/issues/158 there seem to be reports of stuff 'just working', so I wonder is something is amiss on the CLI's end.

[aconsolati]

Some additional info about caching: I can get debugging working for a project as per rodries post above. But if I then attempt to debug a different project then VS Code will try to reference the sourcemaps from the first project. Using the debug output I have found these symbols are cached at the following path:

%TEMP%com.microsoft.VSCode\node-debug2\sm-cache

I need to delete this folder before I can then successfully debug the second project. If I want to debug the first project again, I have to again delete the above sm-cache folder.

[jmesa-sistel]

@aconsolati You are right, I have a script to delete temp folder, I have to clean the %TEMP% folder when I change to another project. It will be great to create an issue about this problem in https://github.com/Microsoft/vscode-node-debug2/issues
Can you do it?

[jkristia]

I'm not able get this working. I added this as escribed earlier

"sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }

to launch,json, but when I try to set a breakpoint I get a warning
[debugger-for-chrome] Cannot read property 'locations' of undefined.

Edit: noticed the comment about caching. I have to delete the cache each time any change is made to the current project (not just when switching project). If I do that and reconnect the debugger, then I am able to set and hit breakpoints.

%TEMP%\com.microsoft.VSCode\node-debug2\sm-cache

Is this not specific to using ng-cli / webpack combination, as I never have had this issue with angularJs / TS?

[spicemix]

Just letting people know, I still wasn't able to get this to work on a Mac, using the latest versions of everything and a vanilla sample app. A step-by-step with a single correct config file would be much appreciated.

I've never gotten VSCode Chrome debugging working well and have usually fallen back to jasmine SpecRunner and debugging in the browser instead. I'm not sure I can get that running here either (#2853 asks for it). As of this minute I can't debug, though I was able to get wallaby running fine using their example (wallabyjs/ngCliWebpackSample).

[maxime1992]

@spicemix I've been stuggling too on Linux and no luck so far.
I've just opened a stackoverflow question here.

[krueger71]

@maxime1992 @spicemix @filipesilva

Can confirm that the config below works fine for me with angular-cli: 1.0.0-beta.19-3. Make sure to have the running app tab in chrome active before using attach. Launch will automatically make this happen, but starts another window, which you might or might not like.

I've also added the --remote-debugging-port=9222 flag to the launcher for Chrome in Ubuntu (16.04)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src/app",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src/app",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }
    ]
}

[hansl]

As of @krueger71's last comment, I'm going to consider this fixed for now. If not, please comment here and make sure to mention me as well as the current state with beta 19-3.

[tebeco]

I'm trying to get it working using :

C:\Workspaces\NinjaSquad\ponyracer>ng -v
angular-cli: 1.0.0-beta.18
node: 6.9.1
os: win32 x64

I may have missed something in my local configuration, I've tried :
"webRoot": "${workspaceRoot}/src/app",
"webRoot": "${workspaceRoot}/src",
"webRoot": "${workspaceRoot}",

as for :
"webpack:///C:_": "C:/_"
"webpack:///C:_": "C:_"

I've also looked at the :
%TEMP%\com.microsoft.VSCode\node-debug2\sm-cache
the %TEMP% points to C:\users\MyUser\AppData\Local\Temp and there's no such com.microsoft.VSCode so my guess is that using windows & vscode it's somewhere else :p ?

here is my setup :

Anyway, when I add a breakpoint after attaching the debugger at the line pointed with the black arrow, the console output this :

SourceMaps.setBP: Mapped c:\Workspaces\NinjaSquad\ponyracer\src\app\menu\menu.component.ts to http://localhost:4200/main.bundle.js
SourceMaps.setBP: Mapped c:\Workspaces\NinjaSquad\ponyracer\src\app\menu\menu.component.ts:17:1 to http://localhost:4200/main.bundle.js:54337:1
Paths.setBP: http://localhost:4200/main.bundle.js is already a URL
SourceMaps.setBP: Mapped http://localhost:4200/main.bundle.js:54337:5 to c:\Workspaces\NinjaSquad\ponyracer\src\app\menu\menu.component.ts:17

so i've tryied to open the main.bundle.js and this is what I have :

The line changes times to times but always points 2 lines ahead so i'm wondering where does my mistake comes from

[deebloo]

@tebeco update to the latest version and see if you are still having the same issue

[tebeco]

you mean beta19.3 ?
I'll check, I was trying to avoid that, i think that the tutorial i'm following might have a tight integration with beta-18

Update (with beta 18) :
I just tried :
(edited packages.json to previous 2.0.3)

rimraf ./node_modules
npm install -g typescript 2.0.3

With version 2.0.9 of typescript it seems to fail

[tebeco]

Well, it seems to works randomly with beta18 I can't make it work anymore :)

I'll see with cli beta 19-3

[jmesa-sistel]

@tebeco
have you tried ?
"webpack:///C:*":"C:/*"
and
"webRoot": "${workspaceRoot}"

works for me using last angular-cli

My actual working config:

{
    "name": "Launch Chrome against localhost, with sourcemaps",
    "type": "chrome",
    "request": "launch",
    //"diagnosticLogging": true,  //enable to debug config problems
    "url": "http://localhost:4200",

    // the next 2 options is to create a new chrome instance without warnings
    "runtimeArgs": [
        "--disable-session-crashed-bubble",
        "--disable-infobars",
        "--disable-application-cache",
        "--media-cache-size=1",
        "--disk-cache-size=1"
    ],
    "userDataDir": "${workspaceRoot}\\chromeDummyDir",
    "sourceMaps": true,
     "sourceMapPathOverrides": {
        "webpack:///C:*":"C:/*"
     },
     "webRoot": "${workspaceRoot}"
}

[georgeedwards]

I have just used @jmesa-sistel 's example. If I run my app with ng serve and then start my debugger, chrome launches with no issue, but any of my breakpoints don't fire and are greyed out with the warning:

Breakpoint ignored because generated code not found (source map problem?).

[jorgeas80]

@georgeedwards did you try with the second comment of this thread? It worked for me in Linux and Windows

[mightypenguin]

EDIT: "--ssl on" option for "ng serve" seems to break the downloading of the bundle/map files for vscode. Works fine without that.

EDIT2: For attach to work had to change chrome launcher link to include (only open 1 tab):
--remote-debugging-port=9222 --user-data-dir=remote-profile

Not working fully for me (source maps not loading, can't trigger breakpoints):
angular-cli 1.0.0-beta.22-1
VScode 1.8.0 (Debugger for Chrome v2.4.0)
Linux Centos7
Chrome 55.0.2883.87 64bit

See log complaints about map files not loading.
ng serve -prod --ssl on --proxy proxy.conf.json
(with or without -prod makes no difference)

(same results with:
"webRoot": "${workspaceRoot}/src/"
"webRoot": "${workspaceRoot}"
)
launch.json

{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "https://127.0.0.1:4200/",
"sourceMaps": true,
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///": "/"
},
"webRoot": "${workspaceRoot}/src/app"
}
}

Log output:
SourceMaps.loadSourceMapContents: Downloading sourcemap file from https://127.0.0.1:4200/inline.d41d8cd98f00b204e980.bundle.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from https://127.0.0.1:4200/inline.d41d8cd98f00b204e980.bundle.map
SourceMaps.loadSourceMapContents: Downloading sourcemap file from https://127.0.0.1:4200/inline.d41d8cd98f00b204e980.bundle.js.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from https://127.0.0.1:4200/inline.d41d8cd98f00b204e980.bundle.js.map
Paths.scriptParsed: could not resolve https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.js to a file under webRoot: /home/user/project/src/app. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.js by URI: styles.b2328beb0372c051d06d.bundle.map and webRoot: /home/user/project/src/app
SourceMaps.loadSourceMapContents: Downloading sourcemap file from https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.map
SourceMaps.loadSourceMapContents: Downloading sourcemap file from https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.js.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from https://127.0.0.1:4200/styles.b2328beb0372c051d06d.bundle.js.map

[brendanalexdr]

@mightypenguin same for me (source maps not loading, can't trigger breakpoints):
angular-cli 1.0.0-beta.22
VScode 1.8.0 (Debugger for Chrome v2.4.0)
Windows 64
Chrome Version 55.0.2883.87 m 64bit

have tried every permutation of launch.json configuration listed on this thread. No luck...

[webernir]

i'm facing the same issue as @georgeedwards, running ng serve, then attaching works, but cannot add breakpoints. any other workarounds?

[robin-a-meade]

angular-cli: 1.0.0-beta.24
VSCode: 1.8.1
vscode-chrome-debug: 2.4.1
node: 6.9.2
os: linux x64 (Fedora 25) (UPDATE: Windows 7 too)
angular: 2.4.1
Chrome: 55.0.2883.87 (64-bit)

Both of these VSCode debugger launch configs worked for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

NOTES:

• the sourceMapPathOverrides given above is one of the three default mappings, so I didn't actually need to specify it. But I wanted to be explicit, so I knew which one worked.
• the diagnosticLogging line is useful for troubleshooting.
• for the attach config, the url parameter is important. Without it, the debugger warned it detected multiple chrome targets and would pick the first one, which, in my case was wrong; it corresponded to a browser extension. If you don't have any chrome extensions installed or other tabs open, then you don't need it because the debugger will only detect one target.
• UPDATE: Successfully tested above config on Windows 7. Both the Launch and Attach configs worked (can set breakpoints in Typescript code). And deleting the sourceMapPathOverrides property, to fallback to the extension's defaults, worked too.

[kiranjulapalli]

Unfortunately it doesn't work for me..
VSCode ver: 1.9.1
@angular/cli: 1.0.0-beta.31
node: 6.9.4
OS: Windows 10
Chrome version: 56.0.2924.87
angular: 2.4.7

Launch partially works by attaching but doesn't see the sourcemaps. Attach doesn't work at all. Appreciate any help

Here is the package.json:

{
  "name": "code-ui",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

and here is the launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

[doczoidberg]

just want to mention that with current version I have still to delete the %temp% folder on win64 to get the breakpoints working correct

[ghost]

Having the same issue with latest version of Angular CLI, Issues seems to still exist, I needed to use the custom launch.json and not the automatically created version as mentioned above by kiranj321

[briancodes]

Got the breakpoints hitting in Angular TypeScript files of basic CLI project with the latest stable versions as of 04/Mar/2017:

• @angular/cli: 1.0.0-rc.1
• VS Code 1.10.1
• Extension: Debugger for Chrome v2.6.0
• Window 10, Chrome Version 56.0.2924.87 with shortcut arguments chrome.exe --remote-debugging-port=9222
• ng serve or npm start which runs by default on http://localhost:4200
• Run Debugger with 'Launch Chrome 4200' below

{
            "name": "Launch Chrome 4200",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"            
        }       

Notes:

• Had to close/reopen Chrome from the updated shortcut
• After running ng serve I went to http://localhost:4200/ in Chrome tab. Ran Launch Chrome 4200 debugger in VSCode, which opened a second tab (no debugging worked in the second tab). If I changed a source file, the breakpoint hit, but the session was attached to the first tab, and I could close the second tab at that point. The breakpoints hit consistently after this
• This was with the default ng new PROJECT_NAME project, with no other config changes, and the breakpoints were in a few extra functions I added to app.component.ts and main.ts

[prateek0103]

Working on:

OS : Arch Linux(4.9.11-1-ARCH)
Executable : Google Chrome 57.0.2986.0 (Official Build) dev (64-bit)
VSCode : 1.7.2

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "runtimeExecutable": "google-chrome-unstable",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

[AbdallahBedir]

In Ubuntu 16.10
` {
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"runtimeExecutable": "/usr/bin/chromium-browser",

        "sourceMapPathOverrides": {
            "webpack:///./*": "${webRoot}/*"
        },
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:4200/",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}",
        "diagnosticLogging": true,
        "sourceMapPathOverrides": {
            "webpack:///./*": "${webRoot}/*"
        },
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    }`

[fortinmike]

For anyone still having this issue, add the "trace": true setting to the launch config (trace replaces diagnosticLogging in the latest Code / Chrome Debugger releases). Only then is the vscode-chrome-debug.txt file written to disk. It can be found in C:\Users\[username]\.vscode\extensions\msjsdiag.debugger-for-chrome-X.Y.Z\.

Just search for the name of one of your project's source files in there. You'll see if the path mapping between the webpack URL and on-disk source files is right or not.

Looking at the mapping, I saw that the extension was trying to read source files from my dist folder (my web root), which is obviously wrong in my case.

Armed with that new knowledge, I ended up using this to "go back" to my workspace root, which worked perfectly:

"webpack:///*": "${workspaceRoot}/*"

Just make sure to use ${workspaceRoot} or a relative path, not an absolute path! (for portability reasons)

[taivu]

anyone got this to work on OSX?

[danieldiazastudillo]

Lucky one here. On Windows 10, ng-cli, webpack & Chrome hitting breakpoints, live reloading... essentially all stuff you get working with the CLI plus full debugging experience with VS Code.

• Windows 10 Pro (x64) Creators Update v1703 (15063.447)
• VS Code v1.13.1 (Shell v1.6.6 & Node v7.4.0)(Angular Language Service v0.1.4)
• VS Chrome Debugger v3.1.6
• Chrome v59.0.3071.115 (x64)
• Angular CLI v1.1.3 (Node v6.10.1)

My launch.json configuration is as follows:

javascript { "version": "0.2.0", "configurations": [ { "name": "Launch Chrome with ngCli@4200", "type": "chrome", "request": "launch", "url": "http://localhost:4200/", "sourceMaps": true, "webRoot": "${workspaceRoot}/src", "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }, "userDataDir": "C:\\temp\\chromeDummyDir", "runtimeArgs": [ "--disable-session-crashed-bubble", "--disable-infobars" ] }, { "name": "Attach to Chrome, with sourcemaps", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, /*"diagnosticLogging": true,*/ "webRoot": "${workspaceRoot}/src", "url": "http://localhost:4200/*", "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" } } ] }
This is @rodries configuration suggestions. The only thing that isn't working are the crashed bubbles and infobars arguments for Chrome. The thing still says that Chrome didn't shut down properly and stuff like that (in my case it even suggests to translate, i don't care putting the args for that). Everything works.

Everything Angular CLI does works great: live reloading, webpack, etc. When running this configuration i was already running ng serve -o. Steps:

1. ng serve -o
2. Debug in VS Code with Launch Chrome with ngCli@4200

Hope this awesome magic trick doesn't fade away with a new update.

[pueaau]

I have adopted

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

Breakpoints seem to work, but I still get the following lines:

SourceMaps.loadSourceMapContents: Could not download sourcemap from chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/ng-validate.js.map
SourceMaps.loadSourceMapContents: Could not download sourcemap from chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js.map

[PauloDanielCarneiro]

I'm with the same problem.

I'm using the "trace" config and the configuration is like:

"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"sourceMaps": true,
"url": "http://localhost/sustentacao/nx/default.aspx#!/*",
"trace": true,
"sourceMapPathOverrides": {
              "http://localhost/sustentacao/nx/default.aspx#!/controles/*":"${workspaceRoot}\\folders\\js\\appcontroles\\*" 
            }

And, in the debug file i'm having a lot of messages of this type:

Paths.scriptParsed: could not resolve http://localhost/sustentacao/nx/js/app/controles/pesquisas/aereas/ctrlAereas2.js?v=20180328082404 to a file under webRoot: undefined. It may be external or served directly from the server's memory (and that's OK).

Anyone can help?

[andresbm05]

In my case the problem was caused by the backward slash after webpack.
I could solve it like this (note the escaped \ after webpack):

{
  ...
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}",
  "sourceMapPathOverrides": {
    "webpack:\\*": "${workspaceFolder}/*"
}

[jakehockey10]

@andresbm05 's solution fixed it for me as well!

[zkhancps]

In my case, the configuration for launch was set right but my code still wasn't hitting the breakpoints.
The intent was to add breakpoints on my VS to debug locally with my local angular project.

Simply ran 'ng build' before hitting 'npm run localhmr' on my angular project to get into debug mode.
Hope this helps others in a similar situation.

[nlaplante]

To make breakpoints work in @angular/cli library projects, I had to configure the launch like this:

BTW, I use scoped packages: @SCOPED_PACKAGE_NAME/PROJECT_NAME

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///ng://@SCOPED_PACKAGE_NAME/PROJECT_NAME/lib/*": "${workspaceRoot}/projects/PROJECT_NAME/src/lib/*",
        "webpack:///*": "${workspaceRoot}/*"
      }
    }
  ]
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}