Angular+NX项目部署遇TS6059错误，求配置解决方案

项目结构 #

|-- apps
|   |-- ngshop
|   |-- admin
|-- environments
|-- libs
|   |-- orders
|   |-- products
|   |-- ui
|   |   |-- src
|   |   tsconfig.json
|-- nx.json
|-- tsconfig.base.json

问题描述 #

部署admin或ngshop应用时，无法访问libs中的文件，触发TS6059错误。最初因环境变量配置问题，将environments文件复制到每个库中（非最佳实践），现在UI库等模块出现大量类似错误，例如：

>  NX   libs/ui/src/lib/Components/banner/banner.component.ts:1:1 - error TS6059: File 'C:/Users/Ale/Desktop/EC-eshop-FrontEnd/bluebits/libs/ui/src/lib/Components/banner/banner.component.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\Ale\Desktop\EC-eshop-FrontEnd\bluebits\libs\products\src'. 'rootDir' is expected to contain all source files.

相关配置文件 #

nx.json配置 #

{
    "$schema": "./node_modules/nx/schemas/nx-schema.json",
    "npmScope": "bluebits",
    "affected": {
      "defaultBase": "master"
    },
    "cli": {
      "packageManager": "npm"
    },
    "tasksRunnerOptions": {
      "default": {
        "runner": "nx-cloud",
        "options": {
          "cacheableOperations": [
            "build",
            "lint",
            "test",
            "e2e"
          ],
          "accessToken": "ZTEyOGYxNjMtZjM4Mi00YzQ0LTk1N2MtYzJiMGY5NzYxZDIxfHJlYWQtd3JpdGU="
        }
      }
    },
    "targetDefaults": {
      "build": {
        "dependsOn": [
          "^build"
        ],
        "inputs": [
          "production",
          "^production"
        ]
      },
      "pluginsConfig": {
        
      },
      "lint": {
        "inputs": [
          "default",
          "{workspaceRoot}/.eslintrc.json"
        ]
      },
      "e2e": {
        "inputs": [
          "default",
          "^production"
        ]
      },
      "test": {
        "inputs": [
          "default",
          "^production",
          "{workspaceRoot}/jest.preset.js"
        ]
      }
    },
    "generators": {
      "@nx/angular:application": {
        "style": "scss",
        "linter": "eslint",
        "unitTestRunner": "jest",
        "e2eTestRunner": "cypress"
      },
      "@nx/angular:library": {
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "@nx/angular:component": {
        "style": "scss"
      }
    },
    "defaultProject": "ngshop",
    "namedInputs": {
      "default": [
        "{projectRoot}/**/*",
        "sharedGlobals"
      ],
      "sharedGlobals": [],
      "production": [
        "default",
        "!{projectRoot}/.eslintrc.json",
        "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
        "!{projectRoot}/tsconfig.spec.json",
        "!{projectRoot}/jest.config.[jt]s",
        "!{projectRoot}/src/test-setup.[jt]s"
      ]
    }
  }

tsconfig.base.json配置 #

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@bluebits/orders": ["libs/orders/src/index.ts"], 
      "@bluebits/products": ["libs/products/src/index.ts"],
      "@bluebits/ui": ["libs/ui/src/index.ts"],
      "@bluebits/uiBanner": ["libs/ui/src/lib/components/banner/banner.component.ts"],
      "@bluebits/users": ["libs/users/src/index.ts"],
      "@env/*": ["environments/*"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

UI库tsconfig.json配置 #

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

解决步骤 #

1. 修正rootDir配置

   • 移除tsconfig.base.json中的"rootDir": "."配置，NX项目中每个库作为独立编译单元，无需根目录统一设置rootDir。
   • 确保每个库的tsconfig.lib.json中设置正确的rootDir：

     {
       "extends": "./tsconfig.json",
       "compilerOptions": {
         "rootDir": "./src",
         "outDir": "../../dist/libs/ui",
         "declaration": true,
         "declarationMap": true
       },
       "include": ["src/**/*"],
       "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
     }
     

2. 清理冗余环境变量文件

   • 删除每个库中复制的environments文件夹，保留根目录的environments即可。
   • 确认tsconfig.base.json中的@env/*路径配置正确，确保所有应用和库都通过@env/xxx导入环境变量。

3. 规范库的导出与路径引用

   • 删除tsconfig.base.json中的@bluebits/uiBanner路径别名，改为在libs/ui/src/index.ts中导出Banner组件：

     export * from './lib/components/banner/banner.component';
     

   • 在应用或其他库中通过@bluebits/ui导入该组件，避免直接引用库内深层文件。

4. 清理NX缓存并重新构建

   • 执行命令清理缓存：nx reset
   • 按依赖顺序重新构建库和应用：nx run-many --target=build --projects=orders,products,ui,ngshop,admin

5. 验证库的构建配置

   • 检查每个库的project.json（或angular.json）中的build配置，确保outputPath指向正确的dist目录，且tsConfig指向tsconfig.lib.json。

内容的提问来源于stack exchange，提问作者Alejandro Alonzo