使用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文件里设置断点了