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

包含YoutubePlayerComponent和YoutubeApiService的@example/ng-youtube-player

包含DailymotionPlayerComponent和DailymotionApiService的@example/ng-dailymotion-player

包含VimeoPlayerComponent和VimeoApiService的@example/ng-vimeo-player

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

你可以说angular使用了树抖动，所以组件无论如何都不会与应用程序捆绑在一起，但无论如何我宁愿为了简洁起见，将这些依赖关系分开。

我曾尝试设置一个包含2个库和一个测试应用程序的monoreo，但从我引用另一个库的服务开始，构建就失败了。我创建了一个非常基本的示例工作空间来重现这个问题：

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:UsersusersourcereposTmpmintplayer-ng-youtube-playerprojectsmintplayerng-youtube-playersrc'. '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:UsersusersourcereposTmpmintplayer-ng-youtube-playerprojectsmintplayerng-youtube-playersrc'. 'rootDir' is expected to contain all source files.

这里有两个主要问题：

你必须按照正确的顺序分别构建每个项目
不能使用其他库中库的服务

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

'；rootDir'；应包含所有源文件

代码

我的测试代码托管在这里。上面的代码块中注明了重现该问题的所有说明。我所做的主要更改是在根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个库和一个测试应用程序的工作区？

如果您正在使用nx，并且操作报告了错误…

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

它让我很痛苦…我不明白为什么nx没有正确构建。。。它给了我很多错误，关于我引用的一个项目@scope1/lib2，以及它的所有.ts文件都在引用它的项目之外……我还注意到dep图有@scope1/lb2，但引用库中没有依赖箭头。。。

我找到了这个修复程序：

rm -rf node_modules/.cache

我猜nx的缓存中有些错误。。。删除后，dep图最终正确显示了链接，构建开始工作

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

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

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

在根tsconfig.json中保留开发时间映射(解析为项目/…)
在用于构建使用者库的tsconfig中添加到已构建工件的映射(在angular.json配置中列出)

IDE很高兴，ng-packager很高兴哈哈哈哈

干杯！

对于NX工作区，这个不明显的错误"；。。。不在"rootDir"下"可以说，您将一些lib1导入到另一个可构建的lib2，而lib2看不到lib1，而且，您不能在库之间执行此操作。Nx中禁止将可发布的库导入库，但错误描述不正确。

为了解决这个问题，您需要从lib2中删除导入的lib1接口或类，它将重新开始工作。

你也可以看看这个github问题https://github.com/nrwl/nx/issues/602

以及可能的解决方案https://github.com/nrwl/nx/issues/602#issuecomment-908064982

这对我来说基本上是angular/nx monoreo中的缓存问题。使用解决

rm -rf node_modules/.cache

在找到这个错误的原因几天后，我的错误是由于webstorm使用不正确的导入部件导入模型文件。

import { Invoice } from "libs/invoicing/src/lib/invoice/invoice.model";

应该只是

import { Invoice } from "../../../../invoice/invoice.model";

您可能正在从库的rootDir外部导入模块，该rootDir主要是src

示例：

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

NX显然是：https://nx.dev.如果您需要创建角度库，最好立即生成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 .libsmycompany-ng-youtube-playersrclib
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-apisrclib
nx g service ng-youtube-api --project=mycompany-ng-youtube-api

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

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

现在只是修改代码的问题。

构建和运行应用程序：

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

重要提示

如果你正在考虑使用NX，那么你显然需要记住以下几点：

Angular发布了一个新版本(v14)
无论谁使用您的库，都在等待您发布与@angular/core@v14兼容的库版本
您将等待NX支持Angular 14
NX正在等待jest-preset-angular发布v14兼容版本

角度单存储库错误 TS6059：文件'ng-youtube-api.service.ngtypecheck.ts'不在"rootDir"下。"rootDir"应包含所有源文件

代码

重要提示

相关内容

最新更新

热门标签：