Skip to content

Instantly share code, notes, and snippets.

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

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

實作環境說明

為了能讓大家能在課堂上順利地進行實作,請先將需要的軟體全部安裝好,以下是安裝的相關軟體與安裝步驟與說明。

[ 作業系統 ]

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

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

[ 瀏覽器 ]

[ 開發工具 ]

[ 安裝 Git 工具 ]

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

[ 安裝 Node.js 工具 ]

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

    • 如果是 Mac 用戶,若使用 Brew 的話,可以用 brew install node 指令安裝
    • 如果你的 Windows 已經安裝過舊版 Node.js 的話,建議完整移除後重裝一次,完整移除 Node.js 的方法請參考以下步驟說明:
      1. 先到控制台手動移除 Node.js 應用程式
      2. 開啟命令提示字元視窗 (Command Prompt) (請以系統管理員身分開啟)
    1. 執行 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
    
  • 驗證安裝結果的指令

    • node -v
      • 確認 v6.9.5 以上版本
    • ng -v
      • 確認 1.0.0-beta.31 以上版本 (如果版本很舊,請參見本文下方的常見問題解答第 4 點)

[ 驗證 Angular-CLI 執行 ]

  • 請依據下列步驟測試 Angular-CLI 是否可以正常執行:
    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
    • 建立 demo1 專案資料夾與 Angular 2 專案骨架 (不要建立單元測試程式碼),請執行下列指令:
      • ng new demo1 --skip-tests
      • 這個過程會建立 Angular 2 專案檔案並自動安裝所有 npm 相依套件!
    • 進入 demo1 目錄
      • cd demo1
    • 啟動 Angular 2 開發伺服器
      • npm start
  • 開啟 Google Chrome 瀏覽器,並連接到以下網址

常見問題解答

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

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

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

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

    • 標準的升級步驟如下:

       npm uninstall -g angular-cli
       npm uninstall -g @angular/cli
       npm cache clean
       npm install -g @angular/cli
      
  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 都會有很多偵錯訊息出現,畫面感覺很亂,可以調整嗎?

  2. 如果你想將 Angular CLI 升級到 @angular/cli: 1.0.0-beta.31 版本,以下 13 點事情可以了解一下,前 5 點一定要看:

    1. 記得要將 Node.js 升級到 6.9 以上版本
    2. 記得要將舊版 angular-cli 套件移除
      npm uninstall -g angular-cli
      
    3. 安裝新版的 @angular/cli 套件
      npm install -g @angular/cli
      
    4. 先前建立的 Angular 2 專案不需要做任何更新
    5. 先前建立的 Angular 2 專案請改用 npm start 啟動伺服器
      • 因為透過 npm start 會用專案內 node_modues 裡面的 Angular CLI 啟動開發伺服器,以前大家常用的 ng serve 則是使用 global npm module 的 ng 來啟動,但升級之後跟專案版本不一致就可能會導致錯誤,所以建議大家改變習慣,以後都用 npm start 來啟動 webpack dev server
    6. 以前的 ng github-pages:deploy 命令已經在這版移除,未來會用 plugins 的方式重新釋出。例如: https://github.com/angular-buch/angular-cli-ghpages
    7. 新版本的 ng new 增加 -ng4 參數,可建立 Angular 4 專案
    8. 新版本可以透過 ng set --global packageManager=yarn 設定預設用 yarn 來安裝 (安裝速度快一點),也可以透過 ng set --global packageManager=npm 改回原本設定
    9. 原本的 ng new 可以加上 --skip-npm 參數跳過 npm 安裝,現在已經改用 --skip-install 參數來取代 (因為加入了 yarn 的關係)
    10. 現在打 ng help generate 會出現比以前還完整的參數說明
    11. ng build 新增 --sourcemaps 參數 (是之前 --sourcemap 的別名)
    12. 新版支援 serviceWorker 實驗性功能,不熟 Service Worker 的人建議先不要用,不然你的檔案被 cache 住之後,頁面上可能會無法反映出修改後的程式執行結果。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment