Debug angular-cli TS in VS Code and Chrome

Viewed 440

I have a default Angular 4 cli project. I've set-up Visual Studio Code and the Chrome extension in order to be able to debug it and put some breakpoints in the vendor.bundle.js file.

When I set a breakpoint in that file, I get the remark Breakpoint ignored because generated code not found (source map problem?). The source maps are there.

I have been trying about every possible config in launch.json, but without luck.

I see the following in the trace log:

SourceMap: creating for http://localhost:4200/vendor.bundle.js
SourceMap: sourceRoot: webpack:///
SourceMap: sources: ["C:/GIT/c24/apps/C24/c24-my-app/src/$_gendir/node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts", ...]
SourceMap: webRoot: c:\GIT\c24\apps\C24\c24-my-app
SourceMap: resolved sourceRoot webpack:/// -> c:\GIT\c24\apps\C24\c24-my-app\webpack:\
SourceMaps.scriptParsed: http://localhost:4200/vendor.bundle.js was just loaded and has mapped sources: ["c:\\GIT\\c24\\apps\\C24\\c24-my-app\\src\\$_gendir\\node_modules\\@ng-bootstrap\\ng-bootstrap\\alert\\alert.ngfactory.ts", ...]

My launch.json config

{
    "version": "0.2.0",
    "protocol": "inspector",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "trace": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

My Angular CLI config

@angular/cli: 1.4.5
node: 6.11.4
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/platform-server: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4`

Chrome verions

62.0.3202.75

0 Answers
Related