angular2最詳細的開發環境搭建過程

 本文所需要的源代碼，從 http://files.cnblogs.com/files/lingzhihua/angular2-quickstart.rar 下載

angular官方推薦使用quickstart搭建angular2開發環境

git:
http://git-scm.com/download下安裝git
 
node:
https://nodejs.org/en/download/
 
npm:
npm是nodejs官方未nodejs定制的一個工具，是Node.js的包管理器，是Node Packaged Modules的簡稱，通過npm可以下載安裝nodejs的模塊包，nodejs有很多優秀的模塊包可以讓開發這快速開發。

在windows命令行下面輸入下面的指令（linux類似）：
d:
md ag
cd d:\ag
git clone https://github.com/angular/quickstart.git
cd quickstart
npm config set registry http://registry.npm.taobao.org
npm install -g typescript  （單獨使用ts的話）
npm install -g typings （單獨使用ts的話）
npm install
npm start
npm install -g live-server
live-server

檢查下面三個文件是否跟文中的內容一致：
settings.json：
// 將設置放入此文件中以覆蓋默認值和用戶設置。
{
    "typescript.tsdk": "node_modules/typescript/lib",

    // ts 項目, 隱藏 .js 和 .js.map 文件
    "files.exclude": {
        "node_modules": true,
        "**/*.js": { "when": "$(basename).ts" },
        "**/*.js.map": true
    }

,
"vsicons.presets.angular": true
}

tasks.json：
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "showOutput": "always",
    "args": ["/C npm start"]
}

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

文件夾內容如下：

vscode打開angular2-quickstart

在vcode安裝debugger for chrome插件。

 

launch.json：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "調試ts",
            "program": "${workspaceRoot}\\index.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [],
            "sourceMaps": true
        },
        {
            "name": "調試tomcat",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:8080/angular2/index.html",
            "sourceMaps": true,
            "webRoot": "D:\\ts\\angular2-quickstart"
        }
    ]
}

關閉所有的谷歌chrome瀏覽器。

點擊vscode的集成終端，輸入npm start

 

 

找到任意的typescript文件，打斷點，點擊vscode的調試，debug運行即可

運行出現下面的界面：

在下面打斷點:

點擊

vscode自動進入中斷：