7

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

4

4 回答 4

11

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

用于原理图的 Nx 生成器并不能完成您的原理图工作所需的一切。我在下面学到的知识是通过遵循Angular 团队的这篇博客文章在另一个目录中创建一个空白原理图，我建议遵循这篇文章来总体理解原理图。

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

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

  2. 在目录中添加一个collection.json文件tools/schematics，例如

    {
  "$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 原理图以尝试找到它

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

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

于 2018-07-31T18:04:14.023 回答
6

您可以使用以下命令在 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"

于 2018-10-24T08:46:01.327 回答
2

我知道这篇文章有点老了，但我建议你使用同样由 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

于 2019-02-22T12:51:01.870 回答
1

按照 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"
    }
  }
}

在此之后，它完美运行！

于 2018-09-11T09:53:54.007 回答