Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
【Angular 2 開發實戰:新手入門篇】實作環境說明

Angular 2 開發實戰:新手入門篇 實作環境說明

  • 課程名稱: 《台北》Angular 2 開發實戰:新手入門篇
  • 上課日期: 2016-08-06 (六)
  • 上課時間: AM 9:00 ~ PM 5:00 (中午休息一小時) (中午有供餐)
  • 上課地點: 台北市大安區金華街199巷5號 (淡江大學台北校區 506教室)
  • 注意事項:
    • 本課程包含午餐
    • 學員需自備筆電,且須事先安裝好實作環境
    • 學員的筆電建議使用 Windows 或 Mac OS X 作業系統
      • 若為 Windows 作業系統建議使用 Windows 7 以上版本
      • 若為 Mac OS X 作業系統建議使用 Mac OS X 10.6 以上版本
    • 教室會提供有線網路電源插座
      • 如果有 3G/4G 吃到飽的學員,建議還是自行攜帶,以備不時之需。
    • 任何問題請上 本班專屬 Facebook 社團 發問。

實作環境說明

為了能讓大家能在課堂上順利地進行實作,請在上課前把需要的軟體全部安裝好,以下是安裝的相關軟體與安裝步驟與說明,如果安裝過程有遇到任何問題,請上 本班專屬 Facebook 社團 發問。

[ 作業系統 ]

  • Windows 7 以上版本 (更新到最新 Service Pack 版本)
  • Mac OS X 10.6 以上版本

[ 套件管理器 ( Mac OS X Only ) ]

[ 瀏覽器 ]

[ 開發工具 ]

[ 安裝 Git 工具 ]

由於 Visual Studio Code 已內建 Git 工具,因此以下工具僅建議安裝 (非必要)。

[ 安裝 Node.js 工具 ]

  • 請安裝 Node.js v6.2.2 以上版本

    • 如果是 Mac 用戶,若使用 Brew 的話,可以用 brew install node 指令安裝
    • 如果你的 Windows 已經安裝過舊版 Node.js 的話,建議完整移除後重裝一次,完整移除 Node.js 的方法請參考以下步驟說明:
      1. 先到控制台手動移除 Node.js 應用程式
      2. 開啟命令提示字元視窗 (Command Prompt)
      3. 執行 del "%USERPROFILE%\.npmrc" 命令 (此檔案不一定存在,如發生錯誤訊息請自動忽略)
      4. 執行 rmdir /s/q "C:\Program Files\nodejs" 命令
      5. 執行 rmdir /s/q "%APPDATA%\npm-cache" 命令
      6. 執行 rmdir /s/q "%APPDATA%\npm"
        • 請注意: 最後這個步驟會移除您先前曾經安裝過的所有 npm 全域套件(global packages)
  • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X),並執行以下指令安裝 npm 套件 (這個動作會執行 5 ~ 10 分鐘):

    npm install -g angular-cli@webpack
    

    建議安裝 (非必要):

    npm install -g gulp yo webpack rimraf typescript typings eslint tslint
    
  • 驗證安裝結果的指令

    • node -v

      • 確認 v6.2.2 以上版本
    • ng -v

      • 請確認是 1.0.0-beta.11-webpack.2 以上版本 (如果版本很舊,請參見本文下方的常見問題解答第 4 點)
    • 建議安裝 (非必要) 的版本檢查

      • tsc -v
        • 請確認是 1.8.10 以上版本 (如果版本很舊,請參見本文下方的常見問題解答第 3 點)
      • gulp -v
        • 請確認是 3.9.1 以上版本
      • yo --version
        • 請確認是 1.8.4 以上版本
      • webpack version
        • 請確認是 1.13.1 以上版本
      • typings -v
        • 請確認是 1.3.2 以上版本

[ 驗證 Angular-CLI 執行 ]

  • 請依據下列步驟測試 Angular-CLI 是否可以正常執行:
    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
    • 建立 demo1 專案,請執行下列指令:
      • ng new demo1
      • 這個過程會自動建立 demo1 資料夾、建立 Angular 2 專案檔案並自動安裝 npm 與 typings 套件!
    • 進入 demo1 目錄
      • cd demo1
    • 啟動 Angular 2 開發伺服器
      • ng serve
    • 開啟 Google Chrome 瀏覽器,並連接到以下網址
    • 只要瀏覽器畫面上會出現 app works! 字樣,就代表環境設定完成!
  • 以上都驗證成功後,請參考 如何修改 Visual Studio Code 內建的 TypeScript 版本 文章進行設定!

[ 參考資源整理 ]

常見問題解答

  1. 使用 npm 安裝套件時都會出現「指定的路徑、檔名,或是兩者都太長。完整的檔名必須少於 260 個字元,並且目錄名稱必須少於 248 個字元」錯誤訊息怎麼辦?

  2. 請問我公司因為需要設定代理伺服器 (Proxy Server) 才能上網,請問要做那些設定才好呢?

  3. 請問我的 tsc -v 所回傳的版本一直都是舊版,執行 npm install -g typescript 也執行好幾次了,為什麼會這樣呢?

  4. 我已經安裝過舊版的 Angular-CLI 工具,該怎樣升級到新版?

    • 標準的升級步驟如下:

       npm uninstall -g angular-cli
       npm cache clean
       npm install -g angular-cli@webpack
      
  5. 若是用 Mac OS X 電腦,覺得每次安裝 global npm 模組都要打 sudo 很麻煩的話,可以建議用以下命令重裝 node 與 npm
    參考文章:How to use npm global without sudo on OSX

brew install node --without-npm
mkdir "${HOME}/.npm-packages"
echo NPM_PACKAGES="${HOME}/.npm-packages" >> ${HOME}/.bashrc
echo prefix=${HOME}/.npm-packages >> ${HOME}/.npmrc
curl -L https://www.npmjs.org/install.sh | sh
echo NODE_PATH=\"\$NPM_PACKAGES/lib/node_modules:\$NODE_PATH\" >> ${HOME}/.bashrc
echo PATH=\"\$NPM_PACKAGES/bin:\$PATH\" >> ${HOME}/.bashrc
echo source "~/.bashrc" >> ${HOME}/.bash_profile
source ~/.bashrc
  1. 每次從命令提示字元中開啟 Visual Studio Code 都會有很多偵錯訊息出現,畫面感覺很亂,可以調整嗎?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.