我的 Nx 筆記 - tsconfig.json 的坑

我最近在研究 Nx 時遇到了一個坑，這個坑讓我卡了兩、三個小時，所以我將這件事情筆記下來，希望如果以後有人遇到類似的問題，這篇筆記多少可以幫得上忙。

問題描述

在 Angular 專案裡我們經常會看到各種 tsconfig.json ，而這些 tsconfig.json 又繼承來繼承去的，雖然一般我們不會特別去動他們的設定，但當我們因為某些緣故需要去調整的時候，就要特別小心「覆蓋」的問題。

而我遇到的狀況是，我在使用 JSZip 這個套件時，遇到了下圖中的 Error ：

解決辦法是在 apps/app-name/tsconfig.app.json 的 compilerOptions 裡加上 path 的配置：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "//": "...",
  "compilerOptions": {
    "//": "...",
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
  "//": "..."
}

加上之後， JSZip 的問題解決了，但變成下圖中的 Error ：

我百思不得其解，因為 ng serve 沒有問題，但 build 的時候就會說找不到，而我也試了很多方式都解不掉這個問題。

後來我想到，會不會是因為設定會被覆蓋的關係？！

因為原本 libs 裡的 import 路徑會在專案根目錄的 tsconfig.json 裡設定，而 tsconfig.json 們會像下圖這樣繼承配置：

1. apps/app-name/tsconfig.json 繼承 ./tsconfig.json 裡的配置 。
2. apps/app-name/tsconfig.app.json 再繼承 apps/app-name/tsconfig.json 裡的配置。

因此，當我們一開始在 apps/app-name/tsconfig.app.json 加上因應 JSZip 的 paths 配置時，就覆蓋掉原本在 ./tsconfig.json 裡的 paths 配置，造成找不到 libs 裡 export 的 module 的問題。

解決辦法

解決這個問題的辦法基本上有兩個：

1. 在 apps/app-name/tsconfig.app.json 的 paths 補上原本在 ./tsconfig.json 的 paths 配置。
2. 將 JSZip 的配置從 apps/app-name/tsconfig.app.json 移到 ./tsconfig.json 裡。

相對來說，第二個方式絕對會比第一個方式好得多。

結論

一般來說，其他的 tsconfig.json 都不太會需要去動，因此只要我們養成習慣，都只在修改在專案根目錄下的 tsconfig.json 的配置就不會有問題了。

參考連結

• How to use paths in tsconfig.json?
• TypeScript - Module Resolution