typescript Angular 单反射错误TS 6059:文件“ng-youtube-api.service.ngtypecheck.ts”不在“rootDir”下,“rootDir”应包含所有源文件

nx7onnlm  于 2022-11-18  发布在  TypeScript
关注(0)|答案(5)|浏览(298)

我创建了3个Angular 库/包:

现在我想创建一个包含VideoPlayerComponent的库,只使用提供YoutubeApiServiceDailymotionApiServiceVimeoApiService的包。为了不包括不必要的其他组件,我想将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个存储库),但从一个库使用另一个库中的类的那一刻起,构建就中断了。
我如何解决这个问题,并拥有一个包含两个库和一个测试应用程序的工作区?

esyap4oy

esyap4oy1#

如果您正在使用nx并且操作员报告了错误...
我也遇到了这个问题...
这简直要了我的命......我不明白为什么nx没有正确构建......它给了我大量的错误,关于我引用的一个项目@scope1/lib 2和它的所有.ts文件都在引用它的项目之外......我还注意到dep-graph有@scope1/lib 2,但是没有来自引用库的依赖箭头......
我找到了这个修复程序:

rm -rf node_modules/.cache

我猜nx该高速缓存中有一些错误...删除后,dep-graph最终正确显示了链接,构建开始工作

pkwftd7m

pkwftd7m2#

也许我在这里有点晚了,但我在这里遇到了这个问题,我只使用常规的Angular CLI来管理我的工作区...在搜索了很多内容并阅读了有关模块解析的Typescript文档后,我相信我明白了发生了什么:
路径Map对于Angular Libraries来说是一件常规的事情(特别是在使用二级入口点策略时),但是它的行为有点棘手。当我们在同一个工作空间中有多个库时,事情会变得更加复杂:有时IDE会因为错误而崩溃;有时事情看起来很好,但在构建过程中中断;有时在构建库的过程中一切正常,但在构建消费者应用程序/库时,一切都会爆炸。
问题是:消费者需要库的构建版本才能正常工作,所以他们应该查看dist文件夹。我解决这个问题的方法是:

  • 将dev-timeMap(解析为 *projects/... *)保留在根tsconfig.json中
  • 将Map添加到用于构建使用者库的tsconfig中的已构建工件(在angular.json配置中列出)

IDE很高兴,ng-packagr也很高兴,哈哈哈哈
干杯!干杯!

tjrkku2a

tjrkku2a3#

您可能正在从库的rootDir(通常为src)之外导入模块
例如:

// src/file.ts
import something from '../../another-module' //<-- ouutside rootDir
yzckvree

yzckvree4#

这基本上是一个缓存问题,我在一个Angular /nx monorepo。解决它使用
rm -rf node_modules/.cache

0kjbasz6

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.

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

Generate a library for the youtube player:

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

Specify your package name and version in the package.json :

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

Generate a library for the IFrame API:

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

Specify your package name and version in the package.json :

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

Generate a component in the @mycompany/ng-youtube-player package:

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

Generate a service in the @mycompany/ng-youtube-api package:

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

Now you can add the package dependency to the package.json of the player:

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

Now it's just a matter of modifying the code .
To build and run the application:

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

Important note

If you're considering using NX, then you apparently need to bear the following in mind:

  • Angular releases a new version (v14)
  • Whoever uses your library, is waiting for you to release a @angular/core@v14 compatible version of your library
  • You will be waiting for NX to support Angular 14
  • NX is waiting for jest-preset-angular to release a v14 compatible version
  • ...

相关问题