NX Monorepo中tsconfig继承时如何添加而非覆盖compilerOptions.paths？

当前TypeScript的extends机制会让子配置的paths完全覆盖base配置的paths，导致你需要重复所有路径别名。以下是几种无需重复维护路径的解决方案：

方案1：使用TypeScript JavaScript配置文件（推荐） #

TypeScript支持以.js文件作为配置文件，利用JavaScript的对象扩展语法自动合并base配置中的paths：

1. 将前端的tsconfig.json重命名为tsconfig.js，内容修改为：

const baseConfig = require('../../tsconfig.base.json');

module.exports = {
  compilerOptions: {
    // 继承base的编译选项，同时覆盖前端特有配置
    ...baseConfig.compilerOptions,
    target: "es2022",
    esModuleInterop: true,
    forceConsistentCasingInFileNames: true,
    strict: false,
    noImplicitOverride: true,
    noPropertyAccessFromIndexSignature: true,
    noImplicitReturns: true,
    noFallthroughCasesInSwitch: true,
    // 合并base的paths并添加TypeORM Shim路径
    paths: {
      ...baseConfig.compilerOptions.paths,
      "typeorm": ["node_modules/typeorm/typeorm-model-shim.js"]
    }
  },
  files: [],
  include: [],
  references: [
    { "path": "./tsconfig.editor.json" },
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.spec.json" }
  ],
  angularCompilerOptions: {
    enableI18nLegacyMessageIdFormat: false,
    strictInjectionParameters: true,
    strictInputAccessModifiers: true,
    strictTemplates: true
  }
};

2. 现代Angular/NX版本均支持.js格式的TypeScript配置，IDE也会自动识别。

后续只需维护根目录的tsconfig.base.json，前端会自动继承所有路径别名并添加Shim路径。

方案2：通过脚本自动生成前端配置 #

如果偏好JSON格式配置，可以编写脚本自动合并路径：

1. 在项目根目录创建scripts/generate-frontend-tsconfig.js：

const fs = require('fs');
const path = require('path');

// 读取配置文件路径
const baseConfigPath = path.resolve(__dirname, '../tsconfig.base.json');
const frontendTemplatePath = path.resolve(__dirname, '../apps/frontend/tsconfig.template.json');
const frontendConfigPath = path.resolve(__dirname, '../apps/frontend/tsconfig.json');

// 读取配置内容
const baseConfig = require(baseConfigPath);
const frontendTemplate = require(frontendTemplatePath);

// 合并paths配置
frontendTemplate.compilerOptions.paths = {
  ...baseConfig.compilerOptions.paths,
  "typeorm": ["node_modules/typeorm/typeorm-model-shim.js"]
};

// 写入最终配置
fs.writeFileSync(frontendConfigPath, JSON.stringify(frontendTemplate, null, 2));
console.log('前端tsconfig.json已更新');

2. 创建前端配置模板apps/frontend/tsconfig.template.json（移除原有paths）：

{
  "compilerOptions": {
    "target": "es2022",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "files": [],
  "include": [],
  "references": [
    { "path": "./tsconfig.editor.json" },
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.spec.json" }
  ],
  "extends": "../../tsconfig.base.json",
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

3. 在根目录package.json添加脚本：

{
  "scripts": {
    "sync-frontend-tsconfig": "node ./scripts/generate-frontend-tsconfig.js"
  }
}

4. 每次更新tsconfig.base.json后，运行npm run sync-frontend-tsconfig即可自动生成合并后的配置文件。

方案3：利用NX全局路径配置（NX 16+） #

NX 16及以上版本支持全局路径别名配置，避免在子项目中重复定义：

1. 在根目录nx.json中添加全局路径：

{
  "paths": {
    "@project/dtos/*": ["shared/dtos/src/*"],
    "@project/entities": ["shared/entities/src"],
    "@project/entities/*": ["shared/entities/src/*"],
    "@project/frontend/*": ["shared/frontend/*"]
  }
}

2. 在前端项目的project.json中，为构建目标添加TypeORM Shim路径：

{
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "options": {
        "tsConfig": "apps/frontend/tsconfig.app.json",
        "paths": {
          "typeorm": ["node_modules/typeorm/typeorm-model-shim.js"]
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者Danilo Bassi