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

Question

我创建了 3 个角度库/包：

\n

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

\n

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

\n

\n

您可能会争辩说 Angular 使用了树摇动，因此组件\n无论如何都不会与应用程序捆绑在一起，但无论如何，为了简洁起见，我宁愿\n将这些依赖项分开。

\n

\n

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

\n

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test\ncd angular-monorepo-test\nnpm install\nng build @mintplayer/ng-youtube-api\nng build @mintplayer/ng-youtube-player\nng build ng-youtube-player-demo\n\n# All projects compile successfully\n# Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)\n\nng build @mintplayer/ng-youtube-player\n

\n

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

\n

\xe2\x9c\x96 Compiling with Angular sources in Ivy partial compilation mode.\nprojects/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.\n1 import { Injectable } from \'@angular/core\';\n \nprojects/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.\n

\n

这里有两个主要问题：

\n

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

\n

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

\n

\n
• 'rootDir' 预计包含所有源文件
\n

\n

代码

\n

我的测试代码托管在这里。上面的代码块中记录了重现该问题的所有说明。我所做的主要更改是在根目录中tsconfig.json：

\n

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

\n

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

\n

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

\n

Answer 1

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

我也遇到这个问题了...

这简直要了我的命……我不明白为什么 nx 没有正确构建……它给了我很多关于我引用的项目 @scope1/lib2 及其所有 .ts 文件都在外部的错误引用它的项目...我还注意到 dep-graph 有 @scope1/lib2 但引用库中没有依赖箭头...

我找到了这个修复：

rm -rf node_modules/.cache

我猜测 nx 的缓存中存在错误的内容...删除后，dep-graph 最终正确显示了链接并且构建开始工作

Answer 2

也许我来晚了一点，但我在这里遇到了这个问题，我只使用常规的 Angular CLI 来管理我的工作区...在搜索了很多并浏览了有关模块解析的 Typescript 文档之后，我相信我明白发生了什么在：

路径映射对于 Angular 库来说是很常见的事情（特别是在使用辅助入口点策略时），但它的行为有点棘手。当我们在同一个工作区中有多个库时，事情会变得更加复杂：有时 IDE 会因错误而变得疯狂；有时事情看起来很好，但在构建过程中会崩溃；有时在库的构建过程中一切都很好，但在构建消费者应用程序/库时一切都会爆炸。

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

• 将开发时映射（解析为projects/...）保留在根tsconfig.json中
• 将映射添加到用于构建消费者库的 tsconfig 中的构建工件（在 angular.json 配置中列出）

IDE 快乐，ng-packagr 快乐哈哈哈

干杯!