Angularne debugowanie cli z mapą źródła kodu vs nie działa

Question

Witam Mam wbudowaną aplikację przy użyciu kąta-cli i próbuję debugować za pomocą kodu vs i Debugger dla rozszerzenia chrome. Po jakimś czasie udało mi się sprawić, żeby działało, jakoś dobrze. Co się stanie, mogę ustawić punkt przerwania w mojej klasie maszynopisu, ale umieszcza się go na niewłaściwym numerze wiersza, tak jak mapa źródłowa jest niepoprawna.

proces debugowania - otwarte ng terminalu służyć niż przejdź do zakładki debugowania i kliknij F5 w vscode

Mam następujący: używam LaunchChrome konfigurację

launch.json

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "LaunchChrome", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:4200", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMapPathOverrides": { 
      "webpack:///C:*": "c:/*" 
     } 
     }, 
     { 
      "name": "AttachChrome", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "sourceMapPathOverrides": { 
       "webpack:///*": "/*" 
      } 
     } 
    ] 
} 

kątowa-cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.18", 
    "name": "frontend" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "./dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css", 
     "../semantic/dist/packaged/semantic.css" 
     ], 
     "scripts": [ 
      "../node_modules/jquery/dist/jquery.js", 
      "../semantic/dist/packaged/semantic.js", 
      "../node_modules/chart.js/dist/Chart.bundle.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "inline": { 
     "style": false, 
     "template": false 
    }, 
    "spec": { 
     "class": false, 
     "component": true, 
     "directive": true, 
     "module": false, 
     "pipe": true, 
     "service": true 
    } 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ] 
    } 
} 

Answer 1

I zostały zaktualizowane do kątowa-CLI-beta19-3 i maszynopisu 2.0.6 i wyczyszczone cache w chromie teraz działa.

UPDATE: za pomocą kątowej 2.4.1 teraz

Co zabawne jest to, że nie robi praca z

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

zdefiniowanej tutaj https://github.com/Microsoft/vscode-chrome-debug

ale działa z

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

i dla linu x jako @carpinchosaurio powiedział

"webpack:///*": "/*" 

UPDATE 21.02.2017:

z nowymi wersjami kanciasty i maszynopisu nie ma potrzeby na źródło mapy nadpisuje już ścieżki.

"@angular/compiler-cli": "2.4.8", 
"@angular/cli": "1.0.0-beta.32.3", 
"typescript": "2.1.6" 
angular version 2.4.8 

konfiguracja robocza:

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "LaunchChrome", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:4200", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}", 
     "userDataDir": "${workspaceRoot}/.vscode/chrome" 
    } 
    ] 
} 

Answer 2

dla każdego, kto nadal zainteresowany to pracował dla mnie -

{ 
     "name": "Launch localhost with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:4200", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}/src",   
     "userDataDir": "${workspaceRoot}/.vscode/chrome", 
     "sourceMapPathOverrides": {    
      "webpack:///./~/*": "${workspaceRoot}/node_modules/*", 
      "webpack:///./src/*": "${workspaceRoot}/src/*" 
     } 
     // Uncomment this to get diagnostic logs in the console 
     // "diagnosticLogging": true 
    }