執行命令列： ng run storefrontapp:server:production

報錯：

> Error: projects/storefrontapp/src/app/app.module.ts:33:30 - error TS2307: Cannot find module 'feature-libs/my-lib/src/public-api' or its corresponding type declarations.

33 import { MyLibService } from 'feature-libs/my-lib/src/public-api';

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

如果把錯誤訊息裡提到的第 33 行程式碼註釋掉：

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

build 就沒有任何問題：
![](https://img-blog.csdnimg.cn/img_convert/c1d3d1e89c1317e0651a8d38f21102e0.png)

說明這個錯誤是 33 行程式碼引起的。

本地 storefrontapp Angular 應用，使用的配置檔案是 tsconfig.app.json，這個檔案擴充套件了工作區根目錄下的 tsconfig.json 檔案：

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

在 angular.json 裡，tsconfig.app.json 作為 storefrontapp 的 tsConfig 的配置檔案：

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

每當使用 Angular CLI 新建一個 library 時，該 library 的名稱，都會自動寫入 tsconfig.json 的 paths 節點裡：

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

我們執行完 npm build test-lib 之後，dist 資料夾裡生成對應的資原始檔：

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

然後我們按住 ctrl 之後再單擊，就能看到 test-lib 位於 dist 資料夾中的準確實現位置：

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

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

同理，我們也能按照 Spartacus 其他的 feature library 設計一樣，將 test-lib 的 paths 值，指定成feature-libs 內的資原始檔，而非 dist 資料夾。

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

如果要讓應用在伺服器端渲染即SSR模式下工作，需要將 library 地址新增到 tsconfig.server.json 中：

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

CSR：ng build storefrontapp
SSR: ng run storefrontapp:server

成功構建：

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

# Angular independent feature sub libraries

不知道大家是否注意到了，Angular (@angular) 以某種方式分成不同的“部分”，例如：

* @angular/common
* @angular/core
* @angular/forms

等等。
而 每一個部分，例如 @angular/common 又有不同的子目錄可供匯入：

* @angular/common/http
* @angular/common/locale
* @angular/common/testing

Angular 支援多個開箱即用的子庫。

預設的專案結構包含一個“app”應用程式，它是一個常規的 Angular 專案，然後你新增額外的子庫，即 Angular 庫專案。有放置在庫子資料夾中。

一個 Angular 專案可以包含多個子庫專案。

每個子庫專案都可以作為單獨的 npm 包釋出，因為它們有自己的 package.json 檔案。

npm 支援稱為作用域包名稱的東西。這允許您將包命名為 @angular/core，其中 @angular 是包的範圍。

您可以像這樣將作用域庫新增到當前的 Angular 專案中。

> ng generate library @my-scope/my-library

從範圍專案匯入時，它必須以 scope 為字首。

例如;

```typescript
import { CommonService } from '@cool-lib/common';
import { FeatAComponent, FeatAService } from '@cool-lib/feature-a';
import { FeatBModule } from '@cool-lib/feature-b';
```

在上面，名稱 @cool-lib 是作用域，common 是 npm 包的名稱。

使用 scoped module 的兩個優點：

* 防止與其他包的名稱衝突，例如 @cool-lib/animations 不會與 @angular/animations 衝突
* 將包組織成 node_modules/@cool-lib

Angular tsconfig.json 檔案裡的 paths 用法和 scoped module 定義

相關文章