问题标签 [nrwl-nx]

我正在使用 Visual Studio Code，并尝试在 Nrwl.Nx 工作区中为 Angular 调试 Jest 测试。

这是我迄今为止尝试过的：

启动.json

app.component.spec.ts

最初，我在没有从 zone.js/dist 导入任何内容的情况下运行 app.component.spec.ts 测试，但是当我在 VS Code 中运行调试器时，我会得到：

所以我导入了你在 app.component.spec.ts 中看到的 zone.js/dist 文件

现在，当我在 VS Code 中运行调试器时，我得到了：

进行互联网搜索并没有为我提供有关如何解决此错误的任何信息。

我正在 VSCode 中使用 Nrwl nx 开发一个项目，每当我更改到库的路由或库的前缀时，我的代码都会显示一堆错误错误。一切仍按预期呈现，但我需要重新启动 VSCode 以使所有红线和文本消失。为什么会这样？有没有办法在终端中执行某些操作来重置/更新在 reoot 时自行纠正的任何内容？

我有一个 Nrwl Nx 存储库，其中包含不同的应用程序（角度、带有 express 的 nodejs）和内部共享库。该存储库是使用创建的nx cli，我想构建用于生产的express应用程序之一。

我得到的包非常好，如果我从它的构建位置（dist文件夹）运行它（使用 pm2），它就会运行。但是，如果我将其投入生产，节点模块将丢失并且应用程序无法启动。如果我将 node_modules 文件夹复制到具有内置 dist 的文件夹上方，它也可以正常工作。

但我非常喜欢以下任何一种：

• 得到一个包含所有必需模块的大包？
• 在所有需要的模块所在的主包中获取另一个“供应商”包？

我尝试 "vendorChunk":true在我的生产构建选项中使用，但没有任何变化。

有什么想法吗？

我是一个相对较新的 Angular 开发人员，希望构建一组共享自定义组件库（可能还有其他一些实用程序/接口）的 Angular 应用程序。

Nrwl 的 Nx看起来是一个很好的系统来组织这些片段，所以我想我将使用它来构建。

但是，我有一个理想的规范，从我的搜索中看起来，Nx 并不真正支持：版本库的能力，这样一个应用程序可以引入 1.0 版，而另一个可以引入同一组件的 2.0 版以图书馆为例。

这样，我可以更改应用程序 2 的下拉组件，而不会影响应用程序 1，因为应用程序 2 将只指向新库，而应用程序 1 指向旧库。

有没有人知道在 Nx 中执行此操作的好方法（或解决此问题的好资源；或找到这些资源的好搜索词）？无法在这里找到指导，或者弄清楚这是否可行，正如我所想的那样。

显然有一些更hacker的方法可以做到这一点：

• 具有重复的“版本化”组件（Dropdown1、Dropdown2）
• 对组件库 ( import @cl2/Dropdown)执行相同操作

但从各种角度来看，这些解决方案并不理想，包括应用程序开发人员需要知道每个组件的最新版本、丑陋的组件名称、臃肿的代码库等。

我正在尝试使用 NestJS 和 TypeORM 播种我的数据库。

我有一个创建exercise表的迁移文件和一个将一个ExerciseEntity插入表的种子文件。这些文件之间的主要区别在于迁移文件直接运行查询：

而种子文件获取存储库：

这getRepository是造成错误的原因。

在一项服务中，我获得了存储库并毫无问题地保存了实体。该问题仅在播种时发生。

我注册 TypeORM 如下：

在哪里：

我正在使用nrwl/nx以下 webpack 配置编译和提供应用程序：

我的dist结构最终是：

如我所见，app.module.ts我正在使用TypeOrmModule.forRootAsync能够注入配置服务。我怀疑也许当播种者被执行时，存储库还没有注册。这将解释稍后，在运行 Web 应用程序时，服务可以访问存储库。

知道如何解决这个问题吗？
我的配置是错误的还是遗漏了什么？如果这是问题所在，播种机中有没有办法等待存储库被注册？

编辑：
它与TypeOrmModule.forRootAsync. 我做了以下更改：

错误是一样的。

我正在使用 Angular 探索 Nx（两者都相对较新）并试图弄清楚如何生成一个组件库：

• 可以运行 Storybook，并且
• 可以一次导入一个组件，而不是将整个模块/所有组件拖到需要单个组件的应用程序中。（为了避免在我的包中添加不必要的代码/膨胀）。

所以理想的设置是这样的：

遵循展示如何创建共享组件库的通用 Nx 教程，以及在 Nx 中设置 Storybook的指南，我生成了一个 UI 库，并设置了一个 Storybook 示意图（如果这是正确的说法）对于那个 lib 目录。

希望将我所有的共享组件放在一个库中，并将 Storybook 设置为自动生成并为每个组件提供故事——但随后能够单独将组件从该库拉入其他应用程序，而无需拉入整个庞大的 UI图书馆。

我成功地构建了一个 UI 库和其中的两个组件。我在该库中成功设置了 Storybook。然后，我UIModule从index.tsUI 库中的文件（公共 API）导入，并在我的模板中使用了两个组件之一。

但是当我构建导入 lib 的应用程序时，生产构建包含两个组件，尽管我使用了一个。这是有道理的，因为我正在导入UiModule. 然而，这是不理想的。

我希望创建一个设置，允许在带有 Storybook 设置的库中并置组件，可以单独导入。

有没有办法在不彻底改变 NX 设置的情况下做到这一点？到目前为止，我已经探索了两个主要选项。一种是将所有组件分解为它们自己的 UI 库，将它们全部导入为 Storybook 设置的单独应用程序中，然后将它们单独导入到主应用程序中。像这样（尝试＃1）：

但是，这并不理想，原因如下：

• 它不会对组件进行分组。
• 它涉及更多的 lib 样板。
• 它不会为每个组件自动生成故事。
• 它要求开发人员记住为每个组件添加一个故事到故事书中。

作为第二次尝试（#2），我尝试将每个组件生成为共享目录中的单独库：

这有其自身的许多缺点：

• 仍然无法自动生成故事。
• 不清楚我的故事书应该放在哪里。它是一个独立的应用程序，如上面的树形图吗？这似乎不习惯。我试图把它放在ui目录中，但由于这不是一个“项目”，所以Cannot find project 'ui'当我尝试使用 VSCode NX 扩展名时，我得到了一个。
• 我必须为每个 UI 组件在一个库中生成一个库和一个组件。这是额外的样板和额外的代码以及额外的错误机会。
• 在我看来，Storybook 不应该是一个应用程序，因为它可以正常服务，但有自己的服务命令。

我可以构建上述版本之一（可能是#2），但我怀疑对于看似常见的用例有最佳实践。看来我的大部分困惑源于 Angular 依赖注入。（在 React 应用程序中，您可以只导入一个组件，但在 Angular 中，每个组件都属于一个模块，并且特别需要注入。拥有特定于组件的模块是一种不好的做法吗？）

有谁知道满足这些理想规范的惯用/最佳实践方式（与单个导出组件共享故事书库，或在 NX 中使用自动生成的故事拆分组件）？

我正在查看以下示例：https ://github.com/nrwl/nx-examples/tree/nx-v5-example

我试图弄清楚样式库是如何添加的。我需要运行什么命令？

对我的 NestJS 应用程序进行 API 调用时，我收到以下错误。

core.js:6185 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: " https://localhost:3333/api/product-index ", ok: false, ...}

和

GET https://localhost:3333/api/product-index net::ERR_SSL_PROTOCOL_ERROR

从分别研究 Nest、Angular 和 NGXS 以及建议的处理方式，我已经正确设置了所有内容。我唯一能想到的就是修改参考，localhost:3333/api看看我是否定位到一个不存在的位置。我注意到当我更改为时https，我得到一个 CORS 错误，即使包含在文件http中也不会消失。我已经观看并阅读了一些将 NestJS 连接到 Angular 的教程，一旦他们设置了文件，它就可以工作了。我一直在查看 nrwl 网站上的教程，据我所知，我已经正确设置了所有内容。enableCors()main.ts

这是main.ts文件在我的 Nest 应用程序中的样子

serve文件中我的前端项目的数据angular.json如下所示

我的前端项目中的proxy.conf.json文件看起来像这样

我的 NGXS 模块中有一个服务文件，它product-index向 Nest App 中的控制器发出请求，如下所示

我的environments/environments.ts档案

我的environments/environments.prod.ts档案

正如我之前提到的，我尝试了诸如在路径中添加和删除以及在and/api之间来回切换之类的操作，但它不起作用。我可以成功调用控制器，因此我知道 Nest 中的所有内容都已正确设置，从错误中显示的路径来看，我似乎从我的 NGXS 状态正确定位它。这里有什么问题？我错过了什么，否则我应该看看？httphttpsproduct-indexlocalhost:3333

我有一个带有一些库的反应应用程序，例如使用 nx 配置的单独的 UI 组件库。HMR 不适用于 ui 库项目。当我对projectType:"application"在workspace.json 中声明的文件夹中的组件进行更改时，我只会在浏览器中看到更改。但是，当我对声明为 的内容进行更改时projectType:"library"，页面会刷新（在我[HMR] bundle rebuilding在控制台中看到消息之后）`

我附上了示例配置：https ://gist.github.com/trkaplan/33e93e7cfd46c8a8690dfdecfe3ab63e

我已经通过npm install --save bootstrap命令添加了引导程序，并且我有以下 Angular 组件：navigation.component.html

当我启动应用程序时，源显示如下：

由于 ws-root 和 ws-navigation 标记位于 div#id 标记之间，因此 CSS 无法正确格式化应用程序。

对比

我在这里做错了什么？我需要做什么才能忽略 ws-root 和 ws-navigation 标记。