Angular：将库移动到目录会导致问题

Question

我在“projects”文件夹中创建了一个“libs”目录，目的是将我的库放在那里。但是，当我尝试运行 ng test libraryName 时，CLI 没有使用正确的库路径。本能地，我认为我在 angular.json 文件中指定路径时出错了，但事实并非如此。出于某种原因，将库放在目录中会导致问题。

角度信息：

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.9
Node: 10.15.3
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.9
@angular-devkit/build-angular      0.8.9
@angular-devkit/build-ng-packagr   0.8.9
@angular-devkit/build-optimizer    0.8.9
@angular-devkit/build-webpack      0.8.9
@angular-devkit/core               0.8.9
@angular-devkit/schematics         0.8.9
@angular/cli                       6.2.9
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.2.9
@schematics/angular                0.8.9
@schematics/update                 0.8.9
ng-packagr                         4.7.1
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.16.4

默认项目结构（无错误）：

所需的项目结构（导致错误）：

复制步骤：

1. 创建新项目 (ng new projectName)
2. 导航到项目目录 (cd projectName)
3. 创建库 (ng generate library libraryName)
4. 在“projects”下创建一个名为“libs”的目录。
5. 将库移动到“库”中。
6. 修改在 angular.json 中为“libraryName”找到的路径以反映在第 5 步中所做的更改。（即将路径从“projects/libraryName”更改为“projects/libs/libraryName”
7. 运行ng test libraryName（或ng build libraryName/ng lint libraryName）
8. Angular CLI 会出错。

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angularLibraryGenerateTest": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularLibraryGenerateTest",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angularLibraryGenerateTest:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angularLibraryGenerateTest:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angularLibraryGenerateTest:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angularLibraryGenerateTest-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angularLibraryGenerateTest:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angularLibraryGenerateTest:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "libraryName": {
      "root": "projects/libs/libraryName",
      "sourceRoot": "projects/libs/libraryName/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/libs/libraryName/tsconfig.lib.json",
            "project": "projects/libs/libraryName/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/libs/libraryName/src/test.ts",
            "tsConfig": "projects/libs/libraryName/tsconfig.spec.json",
            "karmaConfig": "projects/libs/libraryName/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/libs/libraryName/tsconfig.lib.json",
              "projects/libs/libraryName/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angularLibraryGenerateTest"
}

我希望 ng test libraryName 执行单元测试，但我收到以下错误：

error TS5058: The specified path does not exist: 'C:/Users/user/projectName/projects/tsconfig.json'.

Error: error TS5058: The specified path does not exist: 'C:/Users/user/projectName/projects/tsconfig.json'.

注意：使用的路径不正确。它应该是 'C:/Users/user/projectName/projects/libs/libraryName/tsconfig.json' 而不是 'C:/Users/user/projectName/projects /tsconfig.json'

Answer 1

您必须调整tsconfig.lib.json 中的相对路径。 当您将库移动到更深的一个目录时，必须调整一些相对路径。

修改项目/libs/library-name/tsconfig.lib.json

{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "src/test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

三个目录而不是两个。
这是必要的，例如ng build 命令。 这同样适用于projects/libs/library-name/tsconfig.spec.json，这是ng test 命令所必需的。

---

注意：使用的路径不正确。它应该是 'C:/Users/user/projectName/projects/libs/libraryName/librarytsconfig.json' 而不是 'C:/Users/user/projectName/projects/tsconfig.json'

反之亦然。 控制台输出中的路径是正确的，因为初始 tsconfig.lib.json 具有类似 ../../tsconfig.json 的相对路径，因此以 /projectName/projects/ 结束，而不仅仅是 projectName/，tsconfig.json 所在的位置应该被扩展。