2016年9月8日 星期四

Angular 2 開發環境建置


  1. 安裝Visual Studio Code (下載)
  2. 安裝Visual Studio Code的擴充套件
    1. Angular 2 TypeScript Snippets
    2. Path Intellisense
    3. TypeScript Toolbox
    4. Auto Import 
    5. refactorix
  3. 安裝Node.js (下載)
    若已安裝Node.js,請執行完整移除。步驟如下:
    1. 至控制台手動移除Node.js
    2. 於命令提示字元輸入下面指令
      (a) del "%USERPROFILE%\.npmrc" 命令 (此檔不一定存在,若錯誤不用理會)
      (b) 
      rmdir /s/q "C:\Program Files\nodejs"
      (c) rmdir /s/q "%APPDATA%\npm-cache"
      (d) rmdir /s/q "%APPDATA%\npm"  (此步驟會移除所有npm的全域套件) (過程稍久)
  4. 安裝 angular-cli
    1. npm uninstall -g angular-cli  (若沒安裝過,先移除)
    2. npm cache clean
    3. npm install -g angular-cli@webpack
    4. npm install -g gulp yo webpack rimraf typescript typings eslint tslint  (非必要)
  5. 檢查版本
    1. node -v  (node.js版本)
    2. ng -v      (確認是1.0.0-beta.11-webpack.2以上的版本)
  6. 開啟命令提示字元,驗證Angular-CLI是否能正常執行
    1. ng new test  (建立專案目錄夾,此目錄夾名稱取名為test,並在此目錄夾安裝npm和typing套件)
    2. 命令提示字元視窗切到 test目錄夾,執行 ng serve  (啟動web server)
    3. 開啟瀏覽器,網址列輸入 http://localhost:4200
  7. 瀏覽器出現app works! 字樣表示環境安裝完成。

沒有留言:

張貼留言