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

Question

我创建了 3 个 angular libraries/packages:

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

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

You could argue that angular uses tree-shaking, so the components will not be bundled with the application anyway, but anyhow I'd rather have those dependencies seperated for brevity.

我已经尝试设置一个包含 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.

这里主要有两个问题：

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

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

代码

我的测试代码托管在 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 --import-path @mycompany/ng-youtube-player

在 package.json:

中指定您的包名称和版本

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

为 IFrame 生成库 API:

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

在 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 最终正确显示 link 并且构建开始工作

Answer 3

也许我来晚了一点，但我在这里遇到了这个问题，我只使用常规 Angular CLI 来管理我的工作区......在搜索了很多内容并浏览了关于 Module Resolution，我相信我明白发生了什么：

路径映射对于 Angular 库来说很常见（尤其是在使用辅助 entry-points 策略时），但它的行为有点棘手。当我们在同一个工作区中有多个库时，事情会变得更加复杂：有时 IDE 会因错误而发疯；有时事情看起来很好，但在构建过程中会中断；有时在库构建期间一切正常，但在构建消费者时一切都会爆炸 app/lib.

问题是：消费者需要构建版本的库才能正常工作，因此他们应该查看 dist 文件夹。我解决这个问题的方法是：

在根 tsconfig.json

projects/...

在用于构建消费者库的 tsconfig 中添加到构建工件的映射（在 angular.json 配置中列出）

IDE开心，ng-packagr开心哈哈哈

干杯！

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

Angular monorepo error TS6059: File 'ng-youtube-api.service.ngtypecheck.ts' is not under 'rootDir'. 'rootDir' is expected to contain all source files

typescript

monorepo

angular

angular-library

代码