Góc cli gỡ lỗi với bản đồ mã nguồn không hoạt động

Question

Hi tôi đã xây dựng một ứng dụng bằng cách sử dụng angular-cli và tôi đang cố gắng gỡ lỗi nó bằng cách sử dụng vs mã và Debugger cho phần mở rộng chrome. Sau một thời gian tôi đã có thể làm cho nó hoạt động, tốt loại. Điều gì xảy ra là tôi có thể thiết lập một điểm ngắt trong lớp bản ghi của tôi nhưng nó được đặt trên một số dòng sai như bản đồ nguồn là không chính xác.

quá trình Debug - mở terminal ng phục vụ hơn đi đến tab debug và nhấn F5 trong vscode

Tôi đã điều sau đây: tôi sử dụng LaunchChrome cấu hình

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:///*": "/*" 
      } 
     } 
    ] 
} 

angular-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

Tôi đã cập nhật đến góc-cli-beta19-3 và nguyên cảo 2.0.6 và xóa bộ nhớ cache trong chrome bây giờ nó hoạt động.

UPDATE: sử dụng 2.4.1 góc tại

Whats buồn cười là nó không làm việc với

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

định nghĩa ở đây https://github.com/Microsoft/vscode-chrome-debug

nhưng nó hoạt động với

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

và cho linu x như @carpinchosaurio nói

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

CẬP NHẬT 2017/02/21:

Với phiên bản mới của góc và nguyên cảo không có nhu cầu về bản đồ nguồn ghi đè con đường nữa.

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

thiết lập làm việc:

{ 
    "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

cho bất cứ ai vẫn quan tâm này làm việc cho tôi -

{ 
     "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 
    }