Angular monorepo 错误 TS6059：文件“ng-youtube-api.service.ngtypecheck.ts”不在“rootDir”下。 'rootDir' 应包含所有源文件

Question

我创建了 3 个 Angular 库/包：

• @example/ng-youtube-player 包含 YoutubePlayerComponent 和 YoutubeApiService
• @example/ng-dailymotion-player 包含 DailymotionPlayerComponent 和 DailymotionApiService
• @example/ng-vimeo-player 包含 VimeoPlayerComponent 和 VimeoApiService

现在我想创建一个包含VideoPlayerComponent 的库，只使用提供YoutubeApiService、DailymotionApiService 和VimeoApiService 的包。为了不包含不必要的其他组件，我想分别拆分 3 个库，这样我就可以只安装 Service 类。

您可能会争辩说 Angular 使用了 tree-shaking，所以组件 无论如何都不会与应用程序捆绑在一起，但无论如何我宁愿 为简洁起见，将这些依赖项分开。

我尝试设置一个包含 2 个库和一个测试应用程序的 monorepo，但是从我从另一个库引用服务的那一刻起，构建失败。我创建了一个非常基本的示例工作区来重现该问题：

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test
cd angular-monorepo-test
npm install
ng build @mintplayer/ng-youtube-api
ng build @mintplayer/ng-youtube-player
ng build ng-youtube-player-demo

# All projects compile successfully
# Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)

ng build @mintplayer/ng-youtube-player

构建失败并出现大量以下错误：

✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/lib/ng-youtube-api.service.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.
1 import { Injectable } from '@angular/core';
 
projects/mintplayer/ng-youtube-api/src/public-api.ts:1:1 - error TS6059: File 'C:/Users/user/source/repos/Tmp/mintplayer-ng-youtube-player/projects/mintplayer/ng-youtube-api/src/public-api.ngtypecheck.ts' is not under 'rootDir' 'C:\Users\user\source\repos\Tmp\mintplayer-ng-youtube-player\projects\mintplayer\ng-youtube-player\src'. 'rootDir' is expected to contain all source files.

这里有两个主要问题：

1. 您必须按照正确的顺序分别构建每个项目
2. 您不能使用其他图书馆的图书馆服务

我已经阅读了以下类似的问题，但对我没有帮助：

• 'rootDir' is expected to contain all source files

代码

我的测试代码托管在here。重现该问题的所有说明都在上面的代码块中注明。我所做的主要更改在根tsconfig.json：

{
  ...
  "compilerOptions": {
    ...,
    "paths": {
      "@mintplayer/ng-youtube-api": [
        "projects/mintplayer/ng-youtube-api/src/public-api.ts"
      ],
      "@mintplayer/ng-youtube-player": [
        "projects/mintplayer/ng-youtube-player/src/public-api.ts"
      ]
    }
  }
}

我已经设置了一个包含库和应用程序的工作区，其中应用程序使用库中的类没有任何问题（请参阅问题顶部的 3 个存储库），但是从库使用另一个库中的类的那一刻起，构建被破坏。

我该如何解决这个问题，并拥有一个包含 2 个库和一个测试应用程序的工作区？

Answer 1

显然是 NX：https://nx.dev。如果您需要创建 Angular 库，最好立即生成 NX 项目。

npm install -g @angular/cli@latest
npm install -g nx
npx create-nx-workspace
cd mycompany-ng-youtube-player

为 youtube 播放器生成一个库：

nx g @nrwl/angular:lib mycompany-ng-youtube-player --buildable --publishable

修改tsconfig.base.json中的路径映射：

"paths": {
  "@mycompany/ng-youtube-player": [
    "libs/mycompany-ng-youtube-player/src/index.ts"
  ]
}

在package.json：中指定您的包名称和版本：

{
  "name": "@mycompany/ng-youtube-player",
  "version": "1.0.0",
  ...
}

为 IFrame API 生成一个库：

nx g @nrwl/angular:lib mycompany-ng-youtube-api --buildable --publishable

修改tsconfig.base.json中的路径映射：

"paths": {
  "@mycompany/ng-youtube-api": [
    "libs/mycompany-ng-youtube-api/src/index.ts"
  ]
}

在package.json：中指定您的包名称和版本：

{
  "name": "@mycompany/ng-youtube-api",
  "version": "1.0.0",
  ...
}

在@mycompany/ng-youtube-player包中生成一个组件：

cd .\libs\mycompany-ng-youtube-player\src\lib
nx g component ng-youtube-player --project=mycompany-ng-youtube-player --module=mycompany-ng-youtube-player --export

在@mycompany/ng-youtube-api 包中生成服务：

cd ..\..\..\mycompany-ng-youtube-api\src\lib
nx g service ng-youtube-api --project=mycompany-ng-youtube-api

现在您可以将包依赖添加到播放器的package.json：

{
  ...,
  "peerDependencies": {
    "@mycompany/ng-youtube-api": "~3.0.0",
    ...
  }
}

现在只需modifying the code。

构建和运行应用程序：

npm run nx run-many -- --target=build --projects=ng-youtube-player-demo --with-deps
npm run nx serve -- --open

Answer 2

如果您使用的是 nx 并且有操作报告的错误...

我也遇到了这个问题……

这让我很生气...我不知道为什么 nx 没有正确构建...它给了我很多关于我引用的项目 @scope1/lib2 及其所有 .ts 文件的错误在引用它的项目之外...我还注意到 dep-graph 具有 @scope1/lib2 但引用库中没有依赖箭头...

我找到了这个修复：

rm -rf node_modules/.cache

我猜 nx 在缓存中有些东西是错误的……删除后，dep-graph 终于正确显示了链接并且构建开始工作