使用ng serve 在Vs Code裏調試 anguar 項目

ng serve 是@angular/cli 下的運行命令

咱們能夠經過下載@angular/cli來生成angular2的模板

npm install -g @angular/cli

ng new Anguar-Example --默認會下載依賴包

cd Angura-Example

npm install --若是下載了依賴包這步能夠不作

ng serve --運行angular 或 npm start 運行項目

默認經過http://localhost:4200/ 訪問。

若是咱們想用VScode調試，咱們先要下載Debugger for chrome 插件到VSCode

而後在工程的launch.jon添加

{
    "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:///./*": "${webRoot}/*" }
    }]
}

主意，sourceMapPathOverrides 是真正起做用的地方，放他指向正確的map文件。

接下來咱們就能夠在VSCode的ts文件裏設置斷點了