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
You can’t perform that action at this time.