Angualr2 - 使用 VS2015

使用 Vs 2015 快速上手 Angular2

 許多程序員希望能夠使用 VS2015 作為 IDE 來開發 Angular 2 應用，這里介紹如何設置 VS2015，使用快速上手文件來搭建 ASP.NET 4.x 項目。

這里介紹的內容來自 Angular 2 官網，項目使用 System.js 來加載 Angular 2,沒有使用打包工具來進行打包，所以，在運行時的頁面中會存在多個腳本引用。我們還可以使用打包工具打包，來使用 Angular 2.

ASP.NET 4.x Project

搭建的步驟如下所示:

• Prerequisite: 安裝 Node.js
• Step 1: 下載快速上手文件
• Step 2: 設置 Visual Studio 中的 TypeScript
• Step 3: 創建 Visual Studio ASP.NET 項目
• Step 4: 將快速上手文件復制到 ASP.NET 項目文件夾
• Step 5: 恢復需要的包文件
• Step 6: 編輯 TypeScript 配置文件
• Step 7: 編譯和運行

 前置條件

如果你的機器上還沒有安裝 Node.Js，首先安裝 Node 和 NPM

打開終端窗口，分別使用 node -v 和 npm -v 命令來檢查你的 node 和 npm 版本。

確認 node 的版本是 4.4.x - 5.x.x 和 3.x.x

第一步，下載快速啟動文件

從 Github 下載 Quick Start 文件, 也可以直接從這里下載壓縮包，如果是 zip 文件，解壓它。

第二步，設置 Visual Studio 中的 TypeScript

打開 Tools -> Extensions and Updates

在窗口左邊的樹中選擇 Online 

在右上角的搜索窗口中輸入 Typescript 進行搜索。

 選擇當前最新的版本。

下載並安裝。

第三步，創建 Visual Studio 項目

如下創建 ASP.NET 4.x 項目

• 在 Visual Studio 中，選擇 File -> New -> Project 
• 在模板樹中，選擇 Templates -> Visual  C# -> Web
• 選擇 ASP.NET Web Application 模板，提供項目名稱，點擊 Ok
• 選擇希望 ASP.NET 4.5.2 作為模板

在這個說明中，我們選擇 Empty 作為模板，沒有額外的文件夾，沒有驗證和寄宿的配置。

第四步，復制 Quick Start 文件到 ASP.NET 項目文件夾中

復制我們下載的文件到包含 .csproj 文件的文件夾中。

點擊解決方案管理器上方的顯示所有文件按鈕，這樣可以看到所有的文件。

在列出的文件和文件夾上右鍵，選擇 Include in Project 來將文件和文件夾包含到項目中，最低限度，必須包含下列文件

• app folder (answer No if asked to search for TypeScript Typings)
• styles.css
• index.html
• package.json
• tsconfig.json

第五步，下載依賴包

這一步需要聯網。下載 Angular2 所依賴的包。

• 在 package.json 文件上右鍵，選擇 Restore Packages。這里使用 npm 來安裝所有定義在 package.json 文件中的包，這會需要一點時間。
• 如果期望的話，可以打開輸出窗口 ( View -> Output ) 來監控 npm 命令的執行過程。
• 忽略警告信息
• 當處理完成之后，會看到一條消息：npm command completed with exit code 0
• 點擊解決方案管理器上部的 Refresh 按鈕，以便更新文件的顯示內容。
• 不要將 node_modules 文件夾包含到項目中，繼續在項目中隱藏。

@angular/complier is not int the npm registry 信息是由於 Visual Studio 2015 使用了舊版本的 npm，更新到最新版本。

• Tools -> Options 打開選項對話框。
• 在左邊的樹中，選擇 Projects and Solutions -> External Web Tools
• 在右邊，將 $(PATH) 移到 $(DevEnvDir) 之上，這一步告訴 Visual Studio 優先使用外部工具而不是內置工具
• 點擊 Ok 關閉對話框
• 重新啟動 Visual Studio

第六步，編輯 Typescript 配置文件

在 TypeScript 配置文件 tsconfig.Json 文件中，為 VS 2015 添加一行 ComplieOnSave: true 的配置。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "compileOnSave": true
}

 

完成之后，退出 Visual Studio，重新加載項目。

第七步，編譯運行

將 index.html 設置為項目的起始頁面，右鍵 index.html，選擇 Set As Start Page.

點擊運行按鈕，或者 F5 鍵，編譯運行項目。

這將使用默認瀏覽器運行項目。

試着修改一些內容，保存並刷新瀏覽器來檢查你的修改。

可能有一些編譯錯誤，比如："Property map does not exist on type Observable<Response>" 和 "Observable cannot be found" ，這意味着你使用老版本的 Visual Studio，可以參考這里。

你應該替換這個文件 

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js， 這將需要管理員權限。

 

參考資料

 

Visual Studio 2015 Quick Start