[Angular #2] 開發工具與環境建置

學習目標：了解如何啟動 Angular 專案、當版本迭代時如何更新 CLI。

👩‍💻在這之前你必須…

• 安裝好 node.js：[第二週]不再與 Node.js、npm 擦肩而過
• 安裝好 git：[第一週]版本控制與 Git 基本指令
• 上述兩點若是 mac 開發，可使用 Homebrew 套件管理工具進行安裝
• 此筆記使用 Visual Studio Code 作為開發工具，請安裝 Angular Extension Pack（請務必安裝作者為 Will 保哥 的版本） 及 Prettier — Code formatter ，此二擴充套件

安裝 Angular CLI 工具

• 為 Angular 專用的 CLI 指令，我們會直接安裝在全域中。
• 可以透過指令引入套件、運行環境、建立各種檔案（module、component、service）、產生部署檔案等。

Step1. 開啟終端機並執行以下指令安裝 Angular CLI

npm install -g @angular/cli

Step2. 檢查是否安裝成功

ng version

開啟第一個 Angular 專案

Step1. 建立專案資料夾： 安裝完畢會自動加入 git 版控並自動安裝所有 npm 相依套件

• 方法一、建立在子資料夾：ng new project-name
• 方法二、建立在當前資料夾：ng new --directory ./

會詢問是否要新增 routing 以及樣式檔格式選擇

[補充說明]

• 也可以直接在指令後方加上兩個問題的選擇（樣式格式：css、scss、sass）

ng new project-name --routing --style scss 

• Angular 12 會自動啟用嚴格模式，如果要取消可以後指令後方加上

ng new project-name --strict=false

Step2. 啟動 Angular 開發伺服器並自動開啟網頁（ http://localhost:4200/）

npm start 

或

ng serve --open

（備註：如果是用「方法一」建立，請先 cd 到資料夾中哦）

運行成功！

補充說明

因為這陣子剛好碰到 11 更新到 12 所以就記錄一下升級方法。

如何升級 Angular CLI

此次操作是由 11 -> 12

目前版本為 11

Step1. 移除 全域 Angular CLI

npm uninstall -g @angular/cli

移除 Angular CLI

Step2. 重新在全域安裝 Angular CLI

npm install -g @angular/cli@latest

重新安裝 Angular CLI

Step3. 確認版本號…成功

ng version

成功升級版本至 12

升級既有專案內 Angular 套件

此次操作是由 11 -> 12

目前版本專案內 Angular 版本為 12

Step1. 確認專案內 Angular 版本

ng version

目前專案內的版本為 11

因為剛剛有升級 全域的 Angular 版本，所以黃字部分就是在提醒這件事情

Step2. 升級專案內 Angular 版本

❗️在執行此步驟時請確保 git 暫存區（staged）是乾淨的哦

ng update @angular/cli@ @angular/core

成功後會顯示更新的資訊說明

package.json 更新

參考資料

• Angular 12 開發環境說明
• 如何正確將 Angular-CLI 更新至最新版

以上有任何錯誤的地方歡迎指正，感謝。