问题标签 [nrwl-nx]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
201 浏览

angular - 赛普拉斯与 nrwl/nx 角度项目的集成

我真的可以在这里使用一些帮助,我们已经在这里待了几天了。

我们有一个 Angular 7 nx 项目,目前有一个应用程序和一个 e2e 应用程序。

我们真的很想开始使用 cypress,但我们在这样做时遇到了麻烦。

我认为主要问题是打字稿。

有人可以分享类似项目的工作配置或结构吗?我说的主要是 tsconfig 文件、webpack config 以及其他需要用到的包

谢谢

0 投票
2 回答
1084 浏览

angular - 如何在其他库 nx (nrwl) 中共享库 - singlerepo

文件夹结构:

我想@lib/api-interfaces在状态和组件中使用:相对路径:../../../foo/xxx/bar/{...}.ts;。

有没有办法做到这一点?

0 投票
1 回答
1452 浏览

angular - 如何通过受影响的 nx:测试将参数传递给 ng-cli?

我想ng test在运行受影响的项目时将一些参数传递给命令(出于 CI 目的)。
例如:ng test --codeCoverage=true --watch=false --progress=false
如何通过nx affected:test?
试过了nx affected --help,但它不包含此类信息。
作为一个天真的解决方案,我可以编写自定义节点脚本,执行并获取结果,nx print-affected 然后从该结果运行命令,但我想找到更有效的方法。

0 投票
0 回答
751 浏览

angular - 升级到 angular8 后单元测试失败

我将项目从 Angular7 升级到 Angular8。(目前,我还没有升级 Nx,当前使用的版本是 "@nrwl/nx": "7.8.7",)

升级后,我的应用程序成功运行(在构建或部署中没有任何问题)。

"codeCoverage": true当我通过放入angular.json 文件运行测试用例时,它失败并抛出错误。

使用的脚本

日志

如果我删除"codeCoverage"标志测试用例执行没有任何错误,但我不会得到任何覆盖。

我正在使用业力茉莉花同样

ng--版本

我尝试了多个节点版本,但仍然相同。

你能告诉我可能是什么问题吗?

提前致谢。

0 投票
1 回答
2497 浏览

angular - Monorepo 模式适用于两种不同的角度应用程序?

到目前为止,我们只有一个 Angular 8 应用程序。但是现在我们必须创建一个新的管理应用程序,其 UI 将类似于现有应用程序(类似于登录组件、侧边栏、导航栏等中的类似 UI)。由于这两个应用程序将部署在两个不同的服务器上但彼此共享组件,因此我们决定将两个不同的源代码保存在一个具有共享组件库的 repo 下。

我们现有的应用程序是使用Jhipster生成的。

我发现以下两种方法对于维护两个不同的应用程序可能很有用。

我阅读了为 Angular 创建库的文章。但是,我找不到任何有关如何更改现有构建过程以构建两个不同应用程序的材料?我阅读的所有文章都有 Angular CLI 命令来构建不同的应用程序。由于我们已经将 webpack 作为捆绑器,我如何配置它来构建我的两个应用程序?基本上我所有的疑问都是关于如何扩展我们用来构建、测试和维护这两个不同应用程序的现有工具。

然后我阅读了有关 monorepo 模式的信息,并通过nrwl.io遇到了Nx。据我了解,它是 Angular CLI 之上的包装器,以支持 monorepo 模式,并附带维护这两个应用程序所需的所有工具。

所以我的问题是,当你只需要在两个应用程序之间共享代码时,monorepo 模式值得去吗?这是就开发的便利性与将现有应用程序转换为支持 monorepo 模式(设置工具,如Nx中的工具)所花费的时间而言,我读过这有点令人头疼。

0 投票
1 回答
833 浏览

monorepo - 存储库中的 Nx 自定义原理图无法加载

我为自定义 Nx 构建器和原理图设置了一个 repo,以构建应用程序/init。最初我在 tools/schematics 文件夹中开发它,一切正常,但决定它应该放在自己的仓库中。我确保将原理图 (collection.json) 和构建器 (builders.json) 添加到 package.json,并设置这两个文件。到那里的一切似乎都在工作。我使用yarn link将原理图添加到我的nx monorepo(所以我不必在测试时重复推送它),然后尝试添加一个应用程序,nx g nx-name:app但我一直收到一个错误,它无法找到模块示意图。

在发布这个之前我已经尝试了很多。重命名文件。使用 index.ts。重新安装 node_modules。重新连接纱线。

错误:

我的收藏.json:

我的文件夹结构:

更新:

将集合工厂指向 dist 文件夹似乎部分运行它?JSON 文件更新,但构建器不会运行并从模板生成文件。也许我需要设置一些东西才能知道构建打字稿源?

添加 package.json 部门:

0 投票
1 回答
397 浏览

angular - 在多个 NgModule 中提供可重用的单例服务的最佳实践(特别是在 monorepo、Nrwl Nx 样式中)

我们有一个 mono repo 并使用 Nx 布局和 /libs。

很多 ....service.ts(服务)可以在多个地方重用。这是问题...

这些服务主要从 REST API 获取,因此设计为保持单例。应该在哪里提供?

我现在的想法是将每个服务包装在一个中NgModule并在那里提供。然后,任何其他模块想要使用该服务都必须导入NgModule.

这样,如果多个模块导入它,则NgModulewith 服务只会被评估一次,并且它提供的服务不会被重新实例化。

另一方面,这会使我的源代码树中的文件数量激增。这一切都值得,还是有更好/更优雅的方式来实现?

0 投票
2 回答
2464 浏览

next.js - 在 nrwl/nx Next js 项目中使用 Tailwind css

如何使 Tailwind css 在 nrwl/nx Next js 项目中工作?现在我正在使用常见的方法,但它失败了:

我采取的常用方法:

  1. npx create-nx-workspace@latest my-org

  2. yarn add --dev @nrwl/next

  3. nx g @nrwl/next:application my-project

  4. yarn add tailwindcss autoprefixer postcss-loader @zeit/next-css

  5. cd apps/my-project

  6. 创造

  1. 创造
  1. 创造
  1. 在页面中创建一个默认的 _app.js
  2. 在 _app.js 中添加 import '../styles/main.css'
0 投票
1 回答
790 浏览

ngrx - 如何在赛普拉斯 e2e 测试之前设置 NGRX 状态?

我正在尝试为我的一个依赖于 NGRX 状态的 UI 页面编写 e2e 测试。在开始测试之前不确定如何设置 NGRX 状态。你能帮我解决这个问题吗?

0 投票
1 回答
2496 浏览

angular - 如何在 Angular / nx 工作区的上下文中运行 nestjs-console 命令

我有一个 NestJS 应用程序作为 Angular / Nx 工作区的一部分。

在我nestjs-console用来运行命令的嵌套应用程序中(例如加载夹具数据)。

根据nestjs-console 文档,这涉及:

  1. 创建console.ts文件
  2. 在 package.json 中添加脚本,例如"console:dev": "ts-node --project apps/api/tsconfig.console.json apps/api/src/console.ts"
  3. 调用它,例如npm run console:dev -- --help

现在我已经使用 Nx 在应用程序之间创建了一个共享代码库

这适用于 Angular CLI ( test;serve等) 下的命令,但可以理解的是,nestjs-console 任务失败了:

错误:找不到模块“@my-workspace/my-lib”

所以问题是如何将nestjs-console 命令置于Angular CLI 的控制之下(或以其他方式运行NestJS 命令)。

我觉得应该可以添加一个angular.json使用现有构建器的自定义任务,然后以某种方式指向控制台命令。(我觉得我不需要自定义 builder,但我可能错了)。

我被卡住了,因为我对这个环境和angular.json workspace config不太熟悉。

任何帮助表示赞赏,无论是:

  • 关于方法的建议
  • 我可以复制的例子
  • 具体指针

编辑

我尝试直接使用 NestJS应用程序上下文(而不是 via nestjs-console),并根据这篇博客文章使用ts-node.

这和以前有同样的问题。我相信这个问题与 ts-node 如何处理 tsconfg 中的路径有关。

如果我更改从以下位置导入共享代码的方式:

至:

然后一切正常,但 tslint 抱怨“库导入必须以 @my-workspace/ (nx-enforce-module-boundaries) 开头”。我可以看到这如何破坏了 Nx 的观点。

或者,处理我认为的路径问题看起来有点麻烦,并且涉及到tspathmodule-alias之类的工具。它也没有受益于 Nx 的优点。

我现在向 angular.json 添加了一个新的Architect 目标,它就像build目标(使用@nrwl/node:build构建器)一样,除了构建所需的应用程序上下文:

构建完成后,它可以通过 node 运行

编辑 2

在上述方法的基础上,还可以使用执行构建器在单独的终端窗口中持续构建控制台应用程序上下文:

从这里我猜下一步可能是将控制台应用程序上下文变成一个单独的应用程序,在 angular.json 中有自己的项目,然后只需拉入所需的代码。开始觉得 Nx 团队比我领先 58 步;-)

不确定这是否是最好的解决方案,但它确实有效。和以前一样,任何建议表示赞赏!

编辑 3

为了对此进行扩展,以回应@Digitrance 的问题。我最终使用的方法是:

角.json

/my-repo/apps/api/src/console.ts

然后运行控制台的命令:

(请注意,这api是我的应用程序的名称)。

希望这可以帮助!