SAP Spartacus angular.json, 是 Angular CLI 自動生成的檔案，裡面針對 storefrontapp，生成的 tsConfig 屬性，指向一個 tsconfig.app.json 檔案,該檔案指定 ng build 如何對該 app 進行構建。

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

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

這裡使用的構建工具 builder 是 @angular-builders/custom-webpack:browser.

types 屬性為何為空？

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

很多 JavaScript 庫，比如 jQuery、Jasmine 測試庫和 Angular，會透過新的特性和語法來擴充套件 JavaScript 環境。 而 TypeScript 編譯器並不能原生的識別它們。 當編譯器不能識別時，它就會丟擲一個錯誤。

可以使用TypeScript 型別定義檔案 —— .d.ts 檔案 —— 來告訴編譯器你要載入的庫的型別定義。

比如上圖第13行程式碼的 build.process.env.d.ts:

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

很多庫在自己的 npm 包中都包含了它們的型別定義檔案，TypeScript 編譯器和編輯器都能找到它們。Angular 庫也是這樣的。 任何 Angular 應用程式的 node_modules/@angular/core/ 目錄下，都包含幾個 d.ts 檔案，它們描述了 Angular 的各個部分。

TypeScript 帶有一個特殊的宣告檔案，名為 lib.d.ts。該檔案包含了 JavaScript 執行庫和 DOM 的各種常用 JavaScript 環境宣告。

在生產模式下的構建，使用另一個配置檔案：tsconfig.app.prod.json:

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

在這個檔案裡，重新對 compilerOptions 的 paths 進行了定義。

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

因此，如果使用了其他的 custom library，需要將其在 dist 下的路徑，同樣宣告在 paths 節點下：

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

否則的話，命令列 ng serve --configuration production 就會報如下錯誤，找不到名為 test-lib 的 custom library：

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

新增之後，yarn build 工作正常：

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

構建成功：
![](https://img-blog.csdnimg.cn/img_convert/2ec1eb2ca4acf915c8c2307274dc302e.png)

關於 tsconfig.json 檔案裡的 include 和 exclude 屬性用法：

include 用於指定要包含在程式中的檔名或模式陣列。 這些檔名是相對於包含 tsconfig.json 檔案的目錄解析的。

例子：

```json
{
  "include": ["src/**/*", "tests/**/*"]
}
```

這個設定會將下列檔案包含進來：

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

包含和排除支援萬用字元來實現 glob 模式：

- * 匹配零個或多個字元（不包括目錄分隔符）
- ? 匹配任何一個字元（不包括目錄分隔符）
- **/ 匹配巢狀到任何級別的任何目錄

如何解決 Angular custom library module 在 ng build 時無法被識別的錯誤

相關文章