我创建了3个Angular 库/包:
- 包含一个
YoutubePlayerComponent
和YoutubeApiService
的@example/ng-youtube-player
- 包含一个
DailymotionPlayerComponent
和DailymotionApiService
的@example/ng-dailymotion-player
- 包含一个
VimeoPlayerComponent
和VimeoApiService
的@example/ng-vimeo-player
现在我想创建一个包含VideoPlayerComponent
的库,只使用提供YoutubeApiService
、DailymotionApiService
和VimeoApiService
的包。为了不包括不必要的其他组件,我想将3个库分开,这样我就可以只安装服务类。
您可能会认为angular使用了树摇动,因此组件无论如何都不会与应用程序捆绑在一起,但无论如何,为了简洁起见,我宁愿将这些依赖项分开。
我试过建立一个包含两个库和一个测试应用程序的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.您必须以正确的顺序分别构建每个项目
1.不能在其他库中使用库中的服务
我已经读过下面类似的问题,但它对我没有帮助:
编号
我的测试代码托管在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个存储库),但从一个库使用另一个库中的类的那一刻起,构建就中断了。
我如何解决这个问题,并拥有一个包含两个库和一个测试应用程序的工作区?
5条答案
按热度按时间esyap4oy1#
如果您正在使用nx并且操作员报告了错误...
我也遇到了这个问题...
这简直要了我的命......我不明白为什么nx没有正确构建......它给了我大量的错误,关于我引用的一个项目@scope1/lib 2和它的所有.ts文件都在引用它的项目之外......我还注意到dep-graph有@scope1/lib 2,但是没有来自引用库的依赖箭头......
我找到了这个修复程序:
我猜nx该高速缓存中有一些错误...删除后,dep-graph最终正确显示了链接,构建开始工作
pkwftd7m2#
也许我在这里有点晚了,但我在这里遇到了这个问题,我只使用常规的Angular CLI来管理我的工作区...在搜索了很多内容并阅读了有关模块解析的Typescript文档后,我相信我明白了发生了什么:
路径Map对于Angular Libraries来说是一件常规的事情(特别是在使用二级入口点策略时),但是它的行为有点棘手。当我们在同一个工作空间中有多个库时,事情会变得更加复杂:有时IDE会因为错误而崩溃;有时事情看起来很好,但在构建过程中中断;有时在构建库的过程中一切正常,但在构建消费者应用程序/库时,一切都会爆炸。
问题是:消费者需要库的构建版本才能正常工作,所以他们应该查看dist文件夹。我解决这个问题的方法是:
IDE很高兴,ng-packagr也很高兴,哈哈哈哈
干杯!干杯!
tjrkku2a3#
您可能正在从库的rootDir(通常为
src
)之外导入模块例如:
yzckvree4#
这基本上是一个缓存问题,我在一个Angular /nx monorepo。解决它使用
rm -rf node_modules/.cache
0kjbasz65#
NX it is apparently: https://nx.dev . If you ever need to create an angular library, it's best to generate an NX project rightaway.
Generate a library for the youtube player:
Specify your package name and version in the
package.json
:Generate a library for the IFrame API:
Specify your package name and version in the
package.json
:Generate a component in the
@mycompany/ng-youtube-player
package:Generate a service in the
@mycompany/ng-youtube-api
package:Now you can add the package dependency to the
package.json
of the player:Now it's just a matter of modifying the code .
To build and run the application:
Important note
If you're considering using NX, then you apparently need to bear the following in mind:
@angular/core@v14
compatible version of your libraryjest-preset-angular
to release a v14 compatible version