自己學習使用了Angular JS 1一段時間，由於沒有具體的專案進行嘗試加上其它研究工作的影響，就擱置了一段時間。在與同事討論技術選型時，才知道Angular JS 2的差別之大（孤陋了，莫見笑），所以決定弄弄Angular 2。WebStorm是進行JS和前端開發的不二之選的IDE工具，雖然目前版本已經更新了，但是由於Angular 2的成熟度還沒那麼高，所以用WebStorm進行Angular 2的工程建立，還是沒有其他語言的方便。自己嘗試用WebStorm搭建Angular 2的工程，雖然在網上看了一些仁兄的帖子，很有幫助，但是感覺關鍵的、核心的問題沒有說清楚（也可能是由於用Node不是很久，知識淺薄），所以搭建過程特別是在Windows上也是磕磕絆絆，總是有些問題。相信其他人也會遇到同樣的問題，所以將問題梳理總結如下。

一、前序

既然是使用Angular JS 2，那麼先簡單說下 1 和 2 的主要區別。這方面內容，網上很多，我就借用其他仁兄的一些資料，具體來源可以檢視：參考資料

Angular 1與 Angular 2之間的一些差別

Angular2使用了javascript的超集‘Typescript’，所以angular1和angular2從設定之初就是不一樣的；
Angular1.x在設計之初主要是針對pc端的，對移動端支援較少（當然也有其他一些衍生框架如ionic），而Angular2是設計包含移動端的；
Angular 1的核心概念是scope，但是angular2中沒有

二、環境準備

• WebStorm 2016.3.3
• Nodejs 7.4.0
• angular-cli 0.31
• Windows 10 RedStone

WebStorm安裝很簡單，破解不是本文重點，建議還是支援正版。

（1）Nodejs安裝

這一步很簡單，下載Windows版的Nodejs，進行按照提示安裝即可，記得選擇將nodejs增加到PATH一項，如果介面上沒有，應該就是預設幫你搞定了，可以忽略我這句廢話。

通過命令，驗證是否安裝成：

node -v

npm -v

如果正常顯示版本號，即安裝成功。

（2）Nodejs配置

Nodejs安裝完成之後，預設會將node.exe的路徑，新增到系統的環境變數中，如果沒有請手動新增。除此之外還要進行其他的配置。

1、配置prefix和cache目錄

示例目錄地址為：C:\Program Files\nodejs

npm config set prefix “C:\Program Files\nodejs\node_global”
npm config set cache  “C:\Program Files\nodejs\node_cache

2、配置環境變數
右擊“計算機”—>”屬性”—>”高階系統設定”—>”環境變數”

在”系統變數”中,設定 NODE_PATH
在系統變數裡新建 NODE_PATH ,值為

C:\Program Files\nodejs\node_global\node_modules

這個值就是上一步中，通過 “npm config set prefix” 設定的值。可以，用下面命令檢視

npm config get prefix

在”使用者變數”中,修改path
修改使用者變數中的path，新增C:\Program Files\nodejs\node_global\。

這個值就是上一步中，通過 “npm config set prefix” 設定的值。

3、配置sass_binary

angular cli 是要依賴node-sass的，預設情況下，不會像其它包一樣直接下載，而是要下載後進行編譯的。在Windows下，首先要通過git下載win32-x64-51_binding.node，但是不知道是被牆還是什麼原因，下不下來，就會導致後面的編譯出錯，以及提示找不到python和Visual Studio的問題。如下：

• 首先要做的就是根據錯誤提示，手動下載相應的版本地址:binding.node

• 將下載的binding.node放到指定目錄，例如：

C:\win32-x64-51_binding.node

• 配置路徑：通過命令配置

npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的映象

npm config set sass_binary_path  “C:\win32-x64-51_binding.node”

當然以上prefix， cache，sass_binary_site， sass_binary_path等，也可以通過修改下面檔案進行配置

C:\<username>\.npmrc

prefix=C:\Program Files\nodejs\node_global
cache=C:\Program Files\nodejs\node_cache
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
sass_binary_path=C:\win32-x64-51_binding.node

（3）安裝工具包

1、全域性安裝阿里cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、全域性安裝typescript

npm install -g typescript typings

3、全域性安裝angularjs-cli

npm install -g @angular/cli

新版已經不用angular-cli進行安裝，而是使用@angular/cli，參見官網

三、建立工程

1、開啟WebStorm新建一個Angualr CLI 工程

• nodejs如果安裝好，WebStorm會自己掃描到
• 指定工程目錄和名稱
• 指定angular-cli的目錄

很多帖子只說指定angular-cli的目錄，沒有說清楚具體是哪個目錄。但是最開始我在指定的時候，一直還提示“Please specify angular-cli package”。還以為是angualr-cli沒有安裝對。

通過嘗試發現：

（a）具體的目錄，就是angular-cli包中，bin目錄的上一層目錄

（b）如果目錄選擇完成後，還提示：“Please specify angualr-cli package”，就點選一下工程名稱那一欄或其它地方。因為選擇angular-cli目錄，不會觸發事件，所以錯誤提示一直在，點了其它地方，觸發一下事件，提示就會消失，“Create”按鈕就可以使用。

2、等待工程建立完成

以上工作完成，就是等待新建一個angular 2工程。這個過程有點慢，主要是IDE會根據package.json下載依賴的包到工程裡面。

如果出現上圖，就說明工程建立完成，工程結構如下

3、執行程式

• 選擇package.json, 右鍵選擇“Show npm Scripts”，或者用“Edit Configurations”，新增“npm”

• 點選“start” 啟動 Web Server

• 在瀏覽器輸入 http://localhost:4200 ，若出現 app works! ，表示 Angular 2 已經正常啟動。

參考資料：