[Angular學習紀錄] 開發工具和基礎設定介紹

本篇文章無任何說明，僅紀錄要開發 Angular 必要的安裝項目和幾個常用的指令，有興趣也可參考保哥的文章 Angular 4 開發環境說明。



安裝項目清單如下

• Git 工具，根據使用習慣自行選擇，並無特定指定哪套工具。
• Node.js，必要安裝項目，請至少安裝 7.x 或 8.x 版本。
• Npm，會隨Node一併安裝。
• Visual Studio Code。
• VSCode 擴充套件，視個人需求安裝。
• TypeScript，透過Npm安裝。
• Angular CLI，透過Npm安裝。

Git 常用相關指令

• git config --global user.name：您的名稱：第一次使用前設定
• git config --global user.email：您的電子郵件，第一次使用前設定
• git remote add origin https://xxx.git ：將本地端git加入到遠端。
• git clone https://xxx.git：將遠端版本複製到本地端。

Npm 常用相關指令

• npm -v：查詢版本號碼，npm會跟著Node.js安裝好後一併安裝。
• npm install：在專案路徑執行，會去把專案所需的npm套件全部抓回來。
• npm install -g 套件名稱@0.0.0 套件名稱 --save-dev ：安裝某工具，可空格後接續多個要一起安裝的工具， -g(選填) 參數代表安裝到全域， @0.0.0(選填) 代表指定版本號安裝，若不指定自動安裝最新版本。
• npm install -g typescript：安裝TypeScript。
• npm install -g rimraf：處理node_modules名稱太長無法刪除的問題，使用方式執行rimraf node_modules。
• npm install -g @angular/cli：安裝Angular CLI。
• npm uninstall -g 套件名稱：移除工具。
• npm ls -g --depth=0 : 查詢目前已安裝的npm模組。
• npm cache clean：清除Npm中的快取套件，建議移除完某個工具後執行。
• npm init -y：建立package.json檔案。
• npm 指令：執行package.json檔案內在Scripts區域內定義的執行命令。

Angular CLI 常用相關指令

• ng new ProjectName：建立新專案(同時初始化Git & 安裝npm相依套件)，需到專案的上層路徑執行該語法。
• ng serve --host 0.0.0.0 --port 4201 --prod：指定不同Port號開啟開發伺服器 --host --port為可選，預設Port 4200，參數 prod(選填) 若有指定該參數會將所有的 js 檔案合併。
• ng g c ComponentName：產生新的Component檔案，g 為 generate 的簡寫，c 為 component 的縮寫。
• ng g m ModuleName：產生新的Module檔案，g 為 generate 的簡寫， m 為 module 的縮寫。
• ng g m ModuleName --routing：建立含有路由的模組。
• ng build --prod：建置專案(預設dev版)，會將程式建置到dist目錄底下，參數 prod(選填)為正式版。

其它 常用相關指令

• where 工具 : 查詢執行檔所在位置，例如 where node。 
• code .：使用Visual  Studio Code 開啟當前目錄。
• node -v：查詢 Node.js 安裝版本。
• npm -v：查詢 Npm 安裝版本。
• tsc -v：查詢 TypeScript 安裝版本。
• tsc -w xxx.ts：編譯並監控某個檔案的變化。