Visual Studio 2015，Angular2進行開發快速入門__angular2

本文介紹了在 Visual Studio 2015 的 ASP.NET 4.x 項目中，用 Angular 實現“快速起步”所需的步驟。

ASP.NET 4.x 項目

在 Visual Studio 的 ASP.NET 4.x 項目中實現“快速起步”的步驟如下：

前提條件 : 安裝 Node.js

第一步 : 下載“快速起步”的檔案

第二步 : 設定 Visual Studio ，以支援 TypeScript

第三步 : 建立 Visual Studio ASP.NET 項目

第四步 : 把“快速起步”中的檔案拷貝到 ASP.NET 的項目目錄中

第五步 : 恢複需要的包

第六步 : 編輯 TypeScript 設定檔

第七步 : 構建和運行應用程式 前提條件 : Node.js

如果你的電腦裡沒有 Node.js® 和 npm ，請安裝 它們 。

在終端或者控制台中運行 node -v 和 npm -v ， 請確認你的 Node 版本為 4.4.x - 5.x.x ， npm 的版本為 3.x.x 。老版本會引起錯誤。 第一步 : 現在“快速起步”檔案

從 github 下載“快速起步”的原始碼 。如果下載的是一個壓縮的 zip 檔案，解壓它。 第二步：設定 Visual Studio ，以支援 TypeScript

確保你的 Visual Studio 2015 是最新版本，然後開啟 Visual Studio 並安裝最新的 TypeScript 工具：

開啟 Tools | Extensions and Updates 。

在左側分類樹中選擇 Online 。

在右上方的搜尋方塊中搜 TypeScript 。

選擇最新版本的 TypeScript 。

下載並安裝依賴包。 第三步 : 建立 Visual Studio ASP.NET 項目

按照下面的步驟建立 ASP.NET 4.x 項目 :

在 Visual Studio 中，選擇 File | New | Project 菜單。

在模板樹中，選擇 Templates | Visual C#( 或 Visual Basic) | Web 菜單。

選擇 ASP.NET Web Application 模板，輸入項目名，點擊“ OK ”按鈕。

選擇自己喜歡的 ASP.NET 4.5.2 模板，點擊 OK 。

本烹飪寶典選擇了 Empty 模板，它沒有添加過任何目錄，沒有身分識別驗證，沒有伺服器託管。為你的項目選擇合適的模板和選項。 第四步 : 拷貝“快速起步”的檔案到 ASP.NET 項目所在的目錄

拷貝從 github 下載的“快速起步”檔案到包含 .csproj 檔案的目錄中。按照下面的步驟把它們加到 Visual Studio 中：

在 Solution Explorer 中點擊 Show All Files 按鈕，顯示項目中所有隱藏檔案。

右鍵點擊每個目錄和檔案，選擇 Include in Project 。 最少要添加下列檔案：

app 目錄（如果詢問是否要搜尋 TypeScript 類型，回答 No ）

styles.css

index.html

package.json

tsconfig.json

typings.json 第五步 : 恢複需要的包

按下面的步驟恢複 Angular 應用程式需要的包：

在 Solution Explorer 中右鍵點擊 package.json ，選擇 Restore Packages 。 
這樣， Visual Studio 會使用 npm 來安裝在 package.json 中定義的所有包 . 這可能需要花一點時間。

如果願意，開啟 Output 視窗 (View | Output) 來監控 npm 命令的執行情況。

忽略所有警告。

當恢複完成後，將會出現一條訊息： npm command completed with exit code 0.

在 Solution Explorer 裡，點擊 Refresh 表徵圖。

不要 將 node_modules 目錄添加到項目中，讓它隱藏。

"@angular/compiler is not in the npm registry" 這個錯誤表明 Visual Studio 2015 使用了老版本的 npm 。按照下面的步驟安裝最新版本的 npm ：

Tools | Options 來開啟“選項”對話方塊。

在左側的樹狀目錄中，選擇 Projects and Solutions | External Web Tools 。

在右側，把 $(PATH) 項移動到 $(DevEnvDir) 上面，這樣就會告訴 Visual Studio 優先在你的路徑中尋找外來工具（比如 npm ）。

點擊 OK ，關閉對話方塊。

重新啟動 Visual Studio 來讓這些修改生效。