###### tags: `Guide` `environment` `Angular`
# 🌝Angular基礎教學00 #環境安裝
## 內容大綱
**主要內容如下**
1. 如何安裝`Node.js`
2. 如何安裝`VSCode`
3. 如何安裝`Angular`
4. 如何安裝`Git`

**相關參考文章**
[Angular 10 開發環境說明](https://gist.github.com/doggy8088/15e434b43992cf25a78700438743774a)

## Node
[Node.js Download for Windows (x64)](https://nodejs.org/en/)
### Node安裝
#### *step1.* 選擇下載版本
- 可以依自己的需求下載需要的版本，但沒有特別需求的下載LTS版本的就行了。
| 名稱 | 版本 | 說明 |
| ---- | ---- | -------- |
| LTS | 穩定版本 | 穩定且長期維護的版本(建議使用) |
| Current | Beta版本 | 有最新功能相對不穩定的版本 |

#### *step2.* 安裝
- 啟動`.msi`檔案後，她會先跑一下子才能按「下一步」，過程中沒有特別需要設定的，都只需要按下一步就可以了。

---

## Visual Studio Code
[VScode - Code editing](https://code.visualstudio.com/)
### VSCode安裝
#### *step1.* 選擇下載版本
- 依照自己的作業系統安裝即可，下載`stable`的就可以了。

| 名稱 | 版本 | 說明 |
| ------ | -------- | -------- |
| stable | 穩定版本 | 基本上都是下載此版本 |
| insiders| Beta版本 | 會有`vscode`未來的新功能，但功能相對不穩定 |

#### *step2.* 安裝設定
- 開啟`.exe`執行檔，除了下面的部份(選擇附加的工作 - 依照自己的使用需求勾選即可)外，其餘的沒什麼可以直接按「下一步」。

| 選項 |功用 |
| -------- | -------- |
| 將「以Code開啟」動作加入Windows檔案總管檔案的操作功能表中 | 右鍵點擊檔案選擇「Open with Code」，可在VSCode快速開啟。|
| 將「以Code開啟」動作加入Windows檔案總管目錄的操作功能表中 | 右鍵點擊資料夾選擇「Open with Code」，可在VSCode快速開啟。|
| 針對支援的檔案類型將Code註冊為編輯器 | 會針對支援的副檔名變更圖示且預設VSCode開啟。|
| 加入PATH中 | 預設勾選，不用再設置環境變數，可以直接使用。|

*step3.* 安裝擴充套件(非必要)
- 安裝完後，可以依照自己的開發需求來裝擴充套件。

以下是我自己有裝的套件，可以參考參考。

| 名稱 | 功用 |
| ---------------------------------------------------------- | ---------------------------------- |
| TSLint | 檢查TypeScript可讀性 |
| Chinese (Traditional) Language Pack for Visual Studio Code | 讓VSCode提供繁體中文的使用者介面。 |
| Path Intellisense | |
| Auto Import | |
| Angular Language Service | |
| Auto Rename Tag | |
| JavaScript (ES6) code snippets | |
| GitLens — Git supercharged | |
| Git History | |

---

## Angular
[Angular CLI](https://cli.angular.io/)
### Angular安裝
#### *step1.* 透過npm安裝
- 開啟`VSCode`，在終端機輸入以下指令

  npm install -g @angular/cli

#### *step2.* 確認是否安裝成功
- 在終端機查詢版本，即可知道是否有安裝成功，安裝失敗查詢版本會找不到版本資訊。

  ng --version


---

## Git
[Git Downloads](https://git-scm.com/downloads)
> 若專案沒有要做版本控制可以不用下載Git
### Git安裝
#### *step1.* 選擇下載版本
- 執行安裝沒有特別的只要一直按下一步就可以了。

### Git補充
#### *1.* 使用前設定
- `第一次`使用Git要記得設定名稱與信箱

* 設定您的名稱

  git config --global [name]

* 設定電子郵件

  git config --global [email]

## 錯誤集
### Angular
#### # ng --version
:::warning
⚡**Error Message**
ng : 因為這個系統上已停用指令碼執行，所以無法載入 C:\Users\eiri\AppData\Roaming\npm\ng.ps1 檔案。

如需詳細資訊，請參閱 about_Execution_Policies，網址為 https:/go.microsoft.com/fwlink/?LinkID=135170。
位於 線路:1 字元:1
:::
> 由於預設 Visual Studio Code 在 Windows 10 下，預設會用 Windows PowerShell 開啟終端機模式。如果你想在 Windows PowerShell 下執行 ng 命令，必須先執行以下命令才可以正常執行：

  Set-ExecutionPolicy RemoteSigned

- 下指令時注意要以==系統管理員==身分輸入。

- 操作步驟

*step1.* 將目前的VSCode關掉。

*step2.* 對著VSCode點右鍵，並選擇「以系統管理員身分執行」。

*step3.* 在VSCode內的終端機，輸入`Set-ExecutionPolicy RemoteSigned`。

- 參考文章
[解決Windows上輸入指令出現「因為這個系統上已停用指令碼執行，所以無法載入...」的問題](https://hsiangfeng.github.io/other/20200510/1067127387/)