Skip to content

Instantly share code, notes, and snippets.

@pntcwz

pntcwz/Angular 4 開發環境說明.md

Forked from doggy8088/Angular 17 Dev Setup.md
Created July 31, 2017 03:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pntcwz/e337c4b506d99c61a67e87c8c16551cf to your computer and use it in GitHub Desktop.
Save pntcwz/e337c4b506d99c61a67e87c8c16551cf to your computer and use it in GitHub Desktop.
Download ZIP
Angular 4 開發環境說明
Raw
Angular 4 開發環境說明.md

Angular 4 開發環境說明

為了能讓大家能夠順利的建立起 Angular 4 開發環境，以下是需要安裝的相關軟體與安裝步驟與說明。

[ 作業系統 ]

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

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

[ 瀏覽器 ]

[ 安裝 Git 工具 ]

首次使用 Git 必須做的設定 (必要設定)

  • 請開啟命令提示字元或終端機視窗，並輸入以下指令進行設定，這是使用 Git 之前的必要步驟：
    • 設定您的名稱: git config --global user.name 您的名稱
    • 設定電子郵件: git config --global user.email 您的電子郵件

[ 開發工具 ]

[ 安裝 Node.js 工具 ]

  • 請安裝 Node.js v6.9.0 以上版本 (安裝 7.x 或 8.x 也可以)
    • 如果是 Mac 用戶，若使用 Brew 的話，可以用 brew install node 指令安裝
    • 如果你的 Windows 已經安裝過 4.0 以前的 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)
  • 建議可以將 npm 升級到 5.0 以上版本，新版本可大幅加快 npm 套件安裝速度
    • 如果是 Mac 用戶，可以使用以下命令升級：npm install npm@latest -g
    • 如果是 Windows 用戶，請透過 npm-windows-upgrade 進行升級。
  • 驗證安裝結果的指令
    • node -v
      • 確認為 v6.9.0 以上版本
    • npm -v
      • 確認為 v3.0.0 以上版本

[ 安裝 Angular CLI 工具 ]

  • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)，並執行以下指令安裝 npm 套件 (這個動作會執行 5 ~ 10 分鐘)：

    npm install -g @angular/cli

  • 驗證安裝結果的指令

    • ng -v
      • 確認 1.1.2 以上版本 (如果版本很舊，請參見本文下方的常見問題解答第 4 點)

[ 驗證 Angular CLI 執行 ]

  • 請依據下列步驟測試 Angular CLI 是否可以正常執行：
    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
    • 建立 demo1 專案資料夾與 Angular 4 專案骨架 (不要建立單元測試程式碼)，請執行下列指令：
      • ng new demo1 --skip-tests --routing
      • 這個過程會建立 Angular 4 專案檔案並自動安裝所有 npm 相依套件！
    • 進入 demo1 目錄
      • cd demo1
    • 啟動 Angular 4 開發伺服器
      • npm start
  • 開啟 Google Chrome 瀏覽器，並連接到以下網址，畫面上只要出現 Welcome to app!! 字樣，就代表設定成功！👍

常見問題解答

  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

  6. 每次從命令提示字元中開啟 Visual Studio Code 都會有很多偵錯訊息出現，畫面感覺很亂，可以調整嗎？

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment