# Day03 【牙起來】 ng與node_modules包的關係

昨天安裝完Angular了，但可能你會有疑問
我明明安裝的是`Angular Cli`，Cli指的是[**命令列介面**](https://zh.wikipedia.org/wiki/%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%95%8C%E9%9D%A2)，這應該不是**Angular**吧，那這兩者是什麼關係？

對於這個問題，我們先繼續往下就知道了

## 產生Angular專案

我們先用`ng new`產生一個全新的Angular專案

> ng new project01


此步驟 `Would you like to add Angular routing?` 問是否添加`routing`模組
不用緊張，這項問題選`y或N`差異只在於多一個檔案而已，我們之後都能手動新增或刪除

在這步驟我先選擇 `y`


接下來此步驟 `Which stylesheet format would you like to use?` 問要使用哪種檔案格式做為預設樣式，有CSS、SCSS、Sass、Less可選擇
在這步驟我先選 `CSS`

（不同版本的Angular可能會出會不同的問題及偏好選項）

之後就開始執行對於Angular專案來說必要的安裝


執行`ng new`時，安裝需要一段時間（任何事第一次都會比較久...）

完成後，在Windows上可能會出現一堆`warning`
提醒系統自動針對作業系統而調整**換行符號**的格式，這可以不用理會


## Angular專案內部結構

打開剛產生出來的資料夾來看


點進**node_modules**資料夾底下一探究竟


發現這裡有一包叫作`@angular`的資料夾，對你想的沒錯，這一包才是 **Angular主體**，Angular本位，Angular框架所用到的東西都在這底下。沒有他，就沒有Angular專案

所以我們是透過`ng-cli`來創建一個Angular專案的

---

## node_modules的優先順序

當程式尋找一個套件時
會先看有沒有 `./node_modules` 資料夾，若有，則看裡面看有沒有這個套件名稱
當沒有時再往外層查找 `../node_modules`
若還是沒有再往外一層 `../../node_modules`
...
以此類推

所以當有多個`node_modules`包時
同層資料夾的`node_modules`包的優先度最高，會先被讀取到

## Angular 全域(global) vs 區域(loacl)

由於上述優先順序的原因，
只要**進了`project01`專案資料夾**內，用到的就是該`node_modules`內的Angular版本，俗稱**Local版**

只要在**專案資料夾以外**的地方，吃到的就是**Global版** Angular Cli
（精確來說是再往外層都沒有`node_modules`，或`node_modules`都沒有Angular資料夾時）

所以下次遇到`global angular cli version is greater than your local version` **global與local版本不一致時**，就知道是什麼問題囉

把Local升到最新版本、或者將Local升級到與Global版本相同、或者將Global移除重新裝舊版本，都能夠解決問題～

把Local升到最新版本
> npm install --save-dev @angular/cli@latest

把Local升級到指定版本
> npm install --save-dev @angular/cli@14.0.7

把Global降版（移除後重裝舊版本）
> npm uninstall -g @angular/cli
> npm cache clean --force
> npm cache verify
> npm install -g @angular/cli@12.0.0

---

### 額外補充，但不是很重要

透過`where`指令，來尋找目前使用到的指令路徑在哪裡

> where ng

在**查找`ng`指另位置**時發現
不管在哪個目錄底下使用`where ng`，都是顯示目前用到的是**Global版**的位置


C:\Users\GJLMoTea\AppData\Roaming\npm\ng
C:\Users\GJLMoTea\AppData\Roaming\npm\ng.cmd

這就讓人納悶啦，那是如何才使用到node_modules的**Local版**的呢？
關鍵就在於`ng.cmd`裡面


所以實際上是先運行**Global版的CMD**，才導向到**Loacl版**去
否則，除非是在 `node_modules\.bin` 底下呼叫，才會真正顯示**Local版**的位置