Angular 12 開發環境說明

Angular 12 開發環境說明.md

Angular 12 開發環境說明

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

[ 作業系統 ]

• Windows 10 以上版本
• Mac OS X 10.6 以上版本

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

• Homebrew — The missing package manager for OS X
  • 安裝過程會要求你安裝一份沒有 IDE 的 Xcode 應用程式
  • 需要有 bash 或 zsh 的 Shell 環境 (Terminal)
  • 相關連結
    • 套件搜尋網站: Search Brew
    • Installing Homebrew without XCode @ ryanwinchester

[ 瀏覽器 ]

• Google Chrome

知名的 Angular 偵錯套件 Augury 目前尚未支援 Angular 9/10/11 Ivy 版本。你可以定期關注 Augury 官網或 GitHub 相關議題。

[ 安裝 Git 工具 ]

• Windows
  • Git
  • TortoiseGit
• Mac
  • Git
  • SourceTree
  • 若使用 Brew 的話，可以用 brew install git 指令安裝

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

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

[ 開發工具 ]

• Visual Studio Code (請安裝或更新至最新版)
  • Angular 擴充套件包
    • 安裝 Angular Extension Pack 擴充套件
      • 由於同名的擴充套件好幾套，請務必安裝作者為 Will 保哥 的版本！
    • 安裝 Prettier - Code formatter 擴充套件
  • 其他可以考慮安裝 (但我沒有裝) 的擴充套件
    • 安裝 Bracket Pair Colorizer 擴充套件
    • 安裝 Angular Component Extension 擴充套件
    • 安裝 Angular 2 TypeScript Emmet 擴充套件
    • 安裝 HTML SCSS Support 擴充套件

[ 安裝 Node.js 工具 ]

• 建議安裝 Node.js v14.17.0 LTS 以上版本 (至少需要 v12.13 以上版本)
  • 如果是 Windows 用戶，若使用 Chocolatey 的話，可以用 choco install nodejs-lts -y 指令安裝
  • 如果是 Windows 用戶且已使用 Chocolatey 安裝，可以用 choco upgrade nodejs-lts -y 指令升級
  • 如果是 Mac 用戶，若使用 Brew 的話，可以用 brew install node 指令安裝
• 驗證安裝結果的指令
  • node -v
    • 確認為 v14.17.0 或以上版本
  • npm -v
    • 確認為 v6.14.13 以上版本
• 離線安裝注意事項
  • 前端工程研究：如何在企業內部使用「完全離線」的方式安裝 npm 套件

[ 安裝 Angular CLI 工具 ]

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

  npm install -g @angular/cli

  如果是 macOS 環境，可能需要使用 sudo npm install -g @angular/cli 命令才能成功安裝。

  由於預設 Visual Studio Code 在 Windows 10 下，預設會用 Windows PowerShell 開啟終端機模式。如果你想在 Windows PowerShell 下執行 ng 命令，必須先執行以下命令才可以正常執行：

  Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

  

• 驗證安裝結果的指令

  • ng version
    • 確認 Angular CLI 為 12.0.0 以上版本

[ 驗證 Angular CLI 執行 ]

• 請依據下列步驟測試 Angular CLI 是否可以正常執行：

  • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
  • 建立 demo1 專案資料夾與 Angular 專案骨架，請執行下列指令：
    • ng new demo1 --routing --style css --strict=false
    • 這個過程會建立 Angular 專案檔案，自動加入 Git 版控，並自動安裝所有 npm 相依套件！
  • 進入 demo1 目錄
    • cd demo1
  • 啟動 Angular 開發伺服器並自動開啟網頁 ( http://localhost:4200/ )
    • npm start 或 ng serve --open

• 畫面上只要出現 demo1 app is running! 字樣，就代表設定成功！👍

  

常見問題解答

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

   • 請參見 如何在 Windows 平台變更 Node.js / npm 全域模組的預設安裝路徑 文章。

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

   • 請參見 如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具 文章。

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

   • 請參見 如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題 文章。

4. 若是用 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

   • Fixing npm permissions | npm Documentation

5. 如何將 npm 升級到最新版本

   Node.js 的套件管理器 npm 會連同 Node.js 一併安裝，一般來說都不需要刻意手動升級版本。

   網路上常見的 npm 升級方法，基本上都不適用於 Windows 平台，你必須參考 npm-windows-upgrade 的說明進行升級動作。

   1. 安裝 npm-windows-upgrade 套件

      npm install --global --production npm-windows-upgrade

   2. 執行升級動作

      npm-windows-upgrade --npm-version latest

   其他平台可以透過 npm i -g npm@latest 直接進行升級動作。