Skip to content

Instantly share code, notes, and snippets.

@tsengeagle

tsengeagle/Angular 17 Dev Setup.md

Forked from doggy8088/Angular 18 Dev Setup.md
Created January 5, 2024 00:10
Show Gist options
  • Save tsengeagle/fc1cf6b7a3f8610b8258805116ec682d to your computer and use it in GitHub Desktop.
Save tsengeagle/fc1cf6b7a3f8610b8258805116ec682d to your computer and use it in GitHub Desktop.
Download ZIP
Angular 17 開發環境說明
Raw
Angular 17 Dev Setup.md

Angular 17 開發環境說明

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

Angular LOGO

[ 作業系統 ]

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

[ 瀏覽器 ]

畢竟 Angular 是一套純前端的開發框架，最終的成本一定是網頁的型態呈現，所以你必須要有一個瀏覽器來進行測試，以下是我們建議的瀏覽器：

請下載 Angular 官方推出的 Angular DevTools 瀏覽器擴充套件，目前支援 Chome extension 與 Firefix Add-ons 版本。

[ 安裝 Git 工具 ]

如果你是第一次使用 Git 版控，請開啟命令提示字元或終端機視窗，並輸入以下指令進行設定，這是使用 Git 之前的必要步驟：

  • 設定您的名稱: git config --global user.name {您的名稱}
  • 設定電子郵件: git config --global user.email {您的電子郵件}

[ 安裝 Node.js 工具 ]

我們在 Angular 官網的 Version compatibility 頁面可以看到不同的 Angular 版本其實有匹配的 Node.js 版本，太新的 Node.js 不能用，太舊也不能用。

我們通常在開發 Angular 一段時間後，多少都會面臨到需要維護不同專案採用不同 Angular 版本的狀況，這時候你就會需要管理多個不同版本的 Node.js 執行環境，這時候就可以考慮使用 NVM (Node Version Manager) 工具來管理多個不同的 Node.js 版本。

  • 如果是 Windows 用戶，請到 nvm-windows 下載 nvm-setup.exe 進行安裝
  • 如果是 macOS/Linux/WSL 用戶，請到 nvm 執行安裝命令。

若要支援 Angular v17 的 Node.js 執行環境，必須要安裝 v18.13.0 LTS 以上版本，若要透過 nvm 安裝 LTS 最新版(v20)，你可以這樣安裝：

  • Windows

    nvm install 20
nvm use 20

    請注意：在 Windows 使用 nvm-windows 安裝 Node.js 時，必須以系統管理員身分執行「命令提示字元」或 PowerShell 命令列環境。

  • macOS / Linux / WSL

    nvm install 20
nvm use 20
nvm alias default 20

    請注意：在 macOS / Linux / WSL 使用 nvm 安裝 Node.js 時，是不需要使用到 sudo 命令的。

最後，我們要驗證一下你的環境目前安裝的 Node.js 為哪個版本？

node -v

請確認為 v18.13.0 或以上版本！

[ 安裝 Angular CLI 工具 ]

開發 Angular 應用程式時，我們會使用到 Angular CLI 命令列工具，這個工具可以幫助我們快速建立 Angular 專案骨架，並且可以幫助我們快速建立元件、服務、模組等等的程式碼。

  • 安裝 Angular CLI 工具可以開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)，並執行以下指令安裝 @angular/cli 這個 npm 套件 (這個動作會執行 1 ~ 2 分鐘左右)：

    npm install -g @angular/cli

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

    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

    image

    如果你身處離線環境(air-gapped network)，請參考我的 前端工程研究：如何在企業內部使用「完全離線」的方式安裝 npm 套件 文章進行安裝。

  • 驗證安裝結果的指令

    ng version

    確認 Angular CLI 為 17.0.8 以上版本

    ng version

[ 驗證 Angular CLI 執行 ]

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

    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)

    • 先準備一個英文命名的資料夾，最好是一個空白資料夾

      例如：

      C:\Projects

      你必須確保 Angular 專案所在路徑不能有空白字元或中文字元！

    • 建立 demo1 專案資料夾與 Angular 專案骨架，請執行下列指令：

      這個過程會建立 Angular 專案檔案，自動加入 Git 版控，並自動安裝所有 npm 相依套件！

      ng new demo1 --ssr=false --style=css

    • 進入 demo1 目錄

      cd demo1

    • 啟動 Angular 開發伺服器並開啟網頁 http://localhost:4200/

      npm start

      或改用以下指令啟動開發伺服器並自動開啟網頁

      ng serve --open

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

    image

[ 開發工具 ]

開發 Angular 應用程式的工具，我們建議使用 Visual Studio Code 為主要的開發工具，請記得安裝或更新至最新版。

除此之外，也請安裝以下幾個重要的擴充套件：

  1. 安裝 Angular Extension Pack 擴充套件

    由於同名的擴充套件好幾套，請務必安裝作者為 Will 保哥 的版本！

  2. 安裝 Prettier - Code formatter 擴充套件

    進階設定請參考 設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格 文章進行設定。

[ 調整 Windows 輸入法設定 ]

如果你使用 Windows 作業系統來開發 Angular 應用程式，使用 Visual Studio Code 工具時，有三個相當重要的鍵盤快速鍵，經常會被中文版的 Windows 作業系統內建的「微軟新注音」輸入法給干擾，導致怎樣都無法用鍵盤按出好用功能。

  • Ctrl + Space

    在各種開發工具中，這個快速鍵通常用來觸發 IntelliSense 輸入建議。

    但是當系統切換到 中文 語言時，主要用來啟用/停用中文輸入法。

  • Ctrl + ,

    在許多應用程式的快速鍵中，這個快速鍵通常用來開啟 設定 視窗。

    但是當系統切換到 中文 語言時，無論你切換到中文或英文模式，都會輸出「全形逗點」。

  • Ctrl + .

    在各種開發工具中，這個快速鍵通常用來觸發 Code Actions 或 Quick Fixes 等程式碼重構建議。

    但是當系統切換到 中文 語言時，無論你切換到中文或英文模式，都會輸出「全形句點」。

詳細內容請參考 開發者必學的多語言輸入法設定技巧：使用 Windows PowerShell 快速建立 文章進行設定。

新手入門學習資源

  1. 熟悉 Angular CLI 命令列工具

    我在 2022/5/12 有舉行過一場將近 2 小時的直播分享，主題是《新手老手都該學會的 Angular CLI 命令列工具應用技巧》，內容深入淺出，建議大家可以花點時間看看！ 👍

    新手老手都該學會的 Angular CLI 命令列工具應用技巧

  2. TypeScript 新手指南

    這是一本免費的電子書，本書 TypeScript 新手指南 的原文來自於簡體中文的 TypeScript 入门教程 專案，並將其內容翻譯為正體中文版。

    建議多利用 TypeScript: TS Playground 來體驗 TypeScript 開發。

常見問題解答

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

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

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

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

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

    網路上常見的 npm 升級方法，基本上都不適用於 Windows 平台，如果你想要在 Windows 單獨升級 npm 版本，建議你直接升級 Node.js 版本即可，不要真的去升級 npm 版本。其他作業系統平台可以透過 npm i -g npm@latest 直接進行升級。

    如果真的想在 Windows 單獨升級 npm 的話，也可參考 npm-windows-upgrade 的說明進行升級。

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