nrwl/nx 工作区特定示意图答案

【问题标题】：nrwl/nx Workspace-Specific Schematicsnrwl/nx 工作区特定示意图
【发布时间】：2019-01-07 16:40:07
【问题描述】：

我一直在研究 nrwl 扩展，它们看起来很棒。但是，当我按照他们的 Workspace Specific Schematics 教程进行操作时，最后一步并没有显示要运行的命令。你能告诉我如何运行我创建的原理图吗？我确定这很简单，但我在任何地方都找不到命令。

【问题讨论】：

标签： nrwl angular-schematics

【解决方案1】：

（编辑：有关正确的 Nx 方法，请参阅 Stefan 的答案。如果您想发布原理图，您仍然需要遵循此答案）

用于原理图的 Nx 生成器并不能满足您的原理图工作所需的一切。我在下面学到的是通过关注this blog post by the Angular Team 在另一个目录中创建一个空白原理图，我建议您遵循它以大致了解原理图。

以下粗略步骤应该可以帮助您顺利上路：

使用 Nx 原理图生成原理图ng g workspace-schematic

在tools/schematics目录下添加collection.json文件，例如

{
  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
  "name": "myCustomCollection",
  "version": "0.0.1",
  "extends": ["@nrwl/schematics"],
  "schematics": {
    "data-access-lib": {
      "factory": "./data-access-lib",
      "schema": "./data-access-lib/schema.json",
      "description": "Create a Data Access Library"
    }
  }
}

注意extends 属性，这意味着如果您的收藏没有特定的原理图，则会在失败之前查看 Nx 原理图以尝试找到它

向您的package.json 添加一个schematics 字段，该字段指向您的collection.json 文件的相对位置（例如"schematics": "./tools/schematics/collection.json"）
将您的 Typescript 编译为 Javascript。我制作了一个package.json 脚本来运行tsc -p tools/tsconfig.typescript.json（你应该修改你的tsconfig 文件以保留编译好的js）
（可选）修改您的angular.json 以默认指向您的集合。 cli > defaultCollection = "."（最初对我来说是@nrwl/schematics）
- 注意：将默认集合设置为“.”使其仅在根目录中有效。如果您需要在子文件夹中运行您的收藏，您需要像 ng g ../..:data-access-lib 一样运行它
使用ng g data-access-lib（如果您完成了第5 步）或ng g .:data-access-lib 运行您的原理图

Nx 原理图生成器似乎存在一些重大差距，但希望这能帮助您重回正轨。

【讨论】：

感谢您发布此信息。非常有帮助。我无法将 defaultCollection 设置为“。” - 改为将其设为 collection.json 的路径。另一个问题是工具 tsconfig 输出到 dist 目录和 ng 找不到原理图的编译模块。我将工具中的 tsconfig 更改为就地输出以解决此问题。
我最终将package.json 添加到tools/schematics 文件夹，然后使用npm 链接将其拉入父级。这让我可以将默认集合指定为 @namespace/schematics（子包的名称），它适用于所有文件夹
@jamesthollowell 你的 package.json 是什么样的？我总是收到错误package was found but does not support schematics
@Springrbua 我假设您的意思是 package.json 用于原理图？您需要在 package.json 文件中的根对象中添加 ` "schematics": "./collection.json"`，以便 Angular CLI 了解您的原理图集合
@jamesthollowell 感谢您提供的信息，解决了我的问题

【解决方案2】：

您可以使用以下命令在 NX 工作区中添加自定义集合：ng generate @nrwl/schematics:workspace-schematic <name-schematic>

然后您可以使用：npm run workspace-schematic <name-schematic> 运行该原理图。

您使用@nrwl/schematics:workspace-schematic 创建的默认原理图需要一个“名称”参数。您可以提供：npm run workspace-schematic <name-schematic> --name <my-funky-name>

在版本@nrwl/nx": "6.4.0"

【讨论】：

这是正确答案。不过，他们一开始就没有正确记录这一点，这是非常愚蠢的。
非常感谢。我认为您可以删除第二段或将 --name myname 添加到其中。当我匆忙跟随时它失败了......

【解决方案3】：

我知道这篇文章有点老了，但我建议你使用同样由 Nrwl 团队开发的 Angular Console，它非常方便，我用它来创建工作区示意图并运行它们。只需打开 Angular 控制台，选择您的工作区，然后：

点击后，您将获得以下信息：

创建后，您可以立即返回到第一个屏幕的角度，您将在那里看到它：

从命令行会是这样的：

ng generate @nrwl/schematics:workspace-schematic data-access-lib --no-interactive idf-monorepo

此时，您的工作区中应该有以下内容：

完成实现后，您可以返回 Angular 控制台，您应该会看到如下内容：

只需点击它，您应该会得到以下信息：

当然，根据您的示意图，您将在此屏幕中获得不同的字段。在我的例子中，我只有一个被定义为属性的名称。

确定在此屏幕中输入所需信息并单击生成，或者如果您想手动执行以下操作：

npm run workspace-schematic -- data-access-lib data-access-common --no-interactive

您还可以从他们的新书中获得有关原理图生成和总体架构的更多详细信息：https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book

更新 (2020-05-04)：如果您想直接从 CLI 生成原理图，您可以这样做：

nx generate @nrwl/workspace:workspace-schematic my-schematic

或者您可以为 VS Code 使用新的 Nx 控制台插件：

https://nx.dev/angular/cli/console

【讨论】：

【解决方案4】：

按照 James 的 5 个步骤，我有工厂属性来定位编译的 js 文件：

{
  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
  "name": "sk",
  "version": "0.0.1",
  "extends": ["@nrwl/schematics"],
  "schematics": {
    "data-access-lib": {
      "factory": "../../dist/out-tsc/tools/schematics/data-access-lib",
      "schema": "./data-access-lib/schema.json",
      "description": "Create a Data Access Library"
    }
  }
}

在这之后，它完美地工作了！

【讨论】：