Angular 工作區是 Angular project 的集合。Angular project 包含 application 和 library 兩種。

![](https://img-blog.csdnimg.cn/img_convert/b946baf69d0fe58aa789785d48c159df.png)

而用來建立或操作應用和庫的命令（比如 add 和 generate）必須在工作區目錄下才能執行。

> ng new <my-project>

上述命令列實際上建立的是一個新的工作區。

當你執行這個命令時，CLI 會在一個新的工作區中安裝必需的 Angular npm 包和其它依賴項，其根應用(root leavl application)名叫 my-project。 該工作區的根資料夾中包含一些工作區配置檔案，和一個帶有自動生成的描述性文字的自述檔案，你可以自定義它。

ng new 還會預設建立一個位於工作區根級的骨架應用，及其端到端測試專案。這個骨架是一個簡單的 Welcome 應用，它可以執行，也很容易修改。這個根應用與工作區同名，其原始檔位於工作區的 src/ 子資料夾中。

這種預設行為適用於典型的“多重（multi）repo”開發風格，每個應用都位於它自己的工作區中。建議初學者和中級使用者使用 ng new 為每個應用建立一個單獨的工作區。

如下圖所示：工作區和根應用的名稱相同：
![](https://img-blog.csdnimg.cn/img_convert/f0b69a2043f50644ef8151faba2d59dd.png)

Angular 還支援包含多個專案的工作區。這種開發環境適用於正在開發可共享庫的高階使用者，以及那些使用“單一（mono）倉庫”開發風格的企業，它只需要一個倉庫，而且所有 Angular 專案都使用全域性配置。

SAP Spartacus 就採取的該種風格。

要設定單一倉庫的工作區，你應該跳過建立根應用的過程。

多專案工作區適用於對所有 Angular 專案使用單一儲存庫（單倉庫模型）和全域性配置的企業。多專案工作區也能為庫開發提供支援。

執行命令列：

> ng new angular-monorepo --create-application false

建立好之後的專案結構如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/3439d678832ec2dcef42bf1a40f421f8.png)

angular.json 裡很乾淨：
![](https://img-blog.csdnimg.cn/img_convert/34053140e7355b782fbf12dacdd67f26.png)

然後，你可以使用工作區內唯一的名字來生成應用和庫：

> ng generate application jerry-first-app

新增了新的應用之後，我們的 Angular 工作區，到底發生了哪些變化？

檢視這個 [commit](https://github.com/wangzixi-diablo/angular-monorepo/commit/a9da6b7d49e48ab60b43749fb45ea750fae8a5bd)即可。

首先是 angular.json, 在 projects 節點下，增添了一個新的以 app 名稱命名的節點，projectType 為 application：

![](https://img-blog.csdnimg.cn/img_convert/b3245cd3a895a82b32f8db2c558216fc.png)

以及對應的 architect：
![](https://img-blog.csdnimg.cn/img_convert/4d0bb3e08be3803bc92e734c308602f5.png)

# package.json

因為多了一個 Angular 應用，我們需要 angular-devkit/build-angular 對專案進行構建：

![](https://img-blog.csdnimg.cn/img_convert/c9c6a7a9af7fcba5da39725551e42ea8.png)

工作區中第一個顯式生成的應用會像工作區中的其它專案一樣放在 projects/ 資料夾中。新生成的庫也會新增到 projects/ 下。當你以這種方式建立專案時，工作區的檔案結構與工作區配置檔案 angular.json 中的結構完全一致。

從下圖能看出，左邊 projects/jerry-first-app 和右邊 angular.json 裡的層級結構一致。

![](https://img-blog.csdnimg.cn/img_convert/847f99268b9f6c62071bbdf4008ae42f.png)

下面我們建立一個庫：

> ng generate library my-lib
![](https://img-blog.csdnimg.cn/img_convert/7705fceab6a8b5c854dd217bcf2194d3.png)

angular.json 檔案在 projects 節點下，多了一個 my-lib 節點，其 projectType 型別為 library：

![](https://img-blog.csdnimg.cn/img_convert/d7a87a7583900b26b1d21cceb034acc6.png)

angular.json 裡的層級結構和檔案系統的目錄同樣是一致的：
![](https://img-blog.csdnimg.cn/img_convert/2f4755f843b92cf751e50b58edad1bbf.png)

這個庫有屬於自己單獨的 package.json：
![](https://img-blog.csdnimg.cn/img_convert/ae5e3635ff7dcd310dcfc6580c2d5873.png)</my-project>

Angular 如何為多個專案使用單一儲存倉庫

相關文章