标签: angular-schematics

我想写一个Rule每次都覆盖一个文件.在下面并MergeStrategy设置为Overwrite:

collection.json

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "function": {
      "aliases": [ "fn" ],
      "factory": "./function",
      "description": "Create a function.",
      "schema": "./function/schema.json"
    }
  }
}

function/index.ts

export default function(options: FunctionOptions): Rule {
  options.path = options.path ? normalize(options.path) : options.path;
  const sourceDir = options.sourceDir;
  if (!sourceDir) {
    throw new SchematicsException(`sourceDir option is required.`);
  }

  const templateSource: Source = apply(
    url('./files'),
    [
      template({
        ...strings,
        ...options,
      }),
      move(sourceDir),
    ]
  )

  return mergeWith(templateSource, MergeStrategy.Overwrite);

}

files/__path__/__name@dasherize__.ts

export function <%= …

我正在尝试学习角度。我安装了最新版本并使用ng new test命令创建了一个名为 test 的应用程序。

然后我在 Visual Studio Code 中打开该应用程序。在终端中，我输入以下命令来创建新组件： ng g form1

我收到以下错误：

Error: A collection and schematic is required during execution.

请看截图。请帮忙。谢谢。

错误截图

我正在尝试为角度cli创建自定义原理图.到目前为止,我已经想通了"集合"必须编译,cli无法读取打字稿.这意味着您不能只是克隆https://github.com/angular/devkit/tree/master/packages/schematics/angular更改您需要的内容并将其发布到npm,这意味着您需要克隆整个https:// github.com/angular/devkit并使用它npm run build来创建您需要通过tsc运行它的编译原理图,然后您可以将这些编译的文件发布到npm并使用npm进行全局安装,例如

npm i -g @thescrollbar/schematics

然后我应该能够做到,ng new --collection=@thescrollbar/schematics my-app但令人惊讶的是,它没有用,并且正在投掷tree.branch is not a function.

但是如果将这个全局安装的包复制到cli的模块中

/usr/local/bin/node_modules/@thescrollbar/schematics - > /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

它开始工作,你可以创建一个基于你的原理图的新应用程序..

现在,对于新问题,当我尝试使用生成新组件时,我没有解决方法

ng g c --collection=@thescrollbar/schematics logo

它使用@schematics/angular模板创建它,而不是我的集合,尽管事实上,当我故意这样做

ng g shat --collection=@thescrollbar/schematics logo

它说

在集合"@ thescrollbar/schematics"中找不到原理图"shat".

我认为这清楚地表明它确实在使用我的收藏品？

有人设法让自定义集合工作吗？全球和生成组件/模块？

我正在努力创建自己的原理图。该原理图将负责使用一些代码创建一个组件（容器）。该组件的模板将包含一些其他组件。该组件之一是可选的横幅组件。该横幅将显示将被翻译成其他语言的文本，因此如果该横幅将包含在组件中，我还应该要求用户提供（默认）翻译文本。以下是该模板的示例：

name@dasherize .component.html.template：

<% if (includeBanner) { %>
<app-banner [title]="'<%= translationModuleKey %>.banner.title' | translate"
                           [description]="'<%= translationModuleKey %>.banner.description' | translate">
</app-banner>
<% } %>
<app-other-component>

</app-other-component>

这是我的 schema.json：

{
  "$schema": "http://json-schema.org/schema",
  "id": "MySchematics",
  "title": "My schematics",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the container",
      "x-prompt": "Container name"
    },
    "includeBanner": {
      "type": "boolean",
      "description": "Include banner",
      "default": "true",
      "x-prompt": "Include banner"
    },
    "bannerTitle": {
      "type": "string",
      "description": "Banner title",
      "x-prompt": "Banner title"
    },
    "bannerDescription": {
      "type": …

我正在尝试按照angular-eslint Github repo 中的说明将 Angular 项目从 TSLint 切换到 ESLint 。

我跑了ng add @angular-eslint/schematics它在我的 package.json 中添加了以下依赖项：

    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "eslint": "7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",

此外，运行npm install以确保这些都已安装。

现在我被指示运行：

ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config

但是，这会导致错误：

Unknown option: '--remove-tslint-if-no-more-tslint-targets'
Unknown option: '--ignore-existing-tslint-config'

当我删除这些选项时，我收到另一个错误：

Invalid rule result: Instance of class Promise.

似乎这个 angular-eslint 示意图没有正确安装。但是，我对这些原理图完全是新手。我一定在这里遗漏了一些明显的东西。

使用@angular/cli 10.2.3。

当我创建 Angular 应用程序时，我使用 CLI 来生成组件。在开发应用程序一段时间后，我为每个组件都有样式文件，但其中大部分是空的。

当我检查声纳时，我在空样式文件中有代码气味：

• 删除这个空的样式表。
• 在此文件的末尾添加一个空的新行。

我应该删除声纳规则还是必须删除项目中的所有空样式文件并在需要它们进行组件样式时在下一个版本的项目中重新创建它们？什么是最佳实践？

我一直在按照本文创建自定义 Angular Schematics：https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4

现在我试图找出如何修改一些文件（例如 app-routing.module.ts，以添加通过我的自定义原理图创建的组件的路由）。是否可以？谁能提供一个例子吗？

我还想同时在不同的位置/文件夹中创建文件。

这是我的自定义原理图的当前结构：

• 源代码
  • 桌子
    • 文件
      • __name@dasherize __-表
        • __name@dasherize __-table-routing.module.ts
        • __name@dasherize __-table.component.html
        • __name@dasherize __-table.component.scss
        • ...
      • 索引.ts
      • 模式.d.ts
      • 架构.json
  • 集合.json
• ...

这是我当前的代码：

索引.ts

import { strings } from '@angular-devkit/core';
import {
    apply, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url
} from '@angular-devkit/schematics';
import { parseName } from '@schematics/angular/utility/parse-name';
import { buildDefaultPath } from '@schematics/angular/utility/project';

import { Schema } from './schema';

export function tabla(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const workspaceConfigBuffer …

我有__name@dasherize__.component.html包含内容的ng 原理图模板：

<% for (let row of getComponents().rows) { %>
<div class="row">
  <% for (let field of row.fields) { %>
  <% if (field.type === 'InputString') { %>
  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>
  <% } %>
  <% } %>
</div>
<% } %>

Run Code Online (Sandbox Code Playgroud)

我用以下方法构建它：

npm run build 
schematics .:ui-generator --name=hello

生成的代码在模板中放置命令“<%”的地方创建空行，请参见：

<div class="row">


  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>



  <field labelCode="code" class="col-sm-6 col-md-3">
    <input name="code" ngModel [readonly]="readOnly">
  </field>



  <field labelCode="code" class="col-sm-6 col-md-3"> …

Run Code Online (Sandbox Code Playgroud)

我正在学习 Angular Schematics 并且在数组类型 input方面有一些问题。

当系统提示我输入一个值并按 Enter 时，该值消失。输入数组值的正确方法是什么？

我的schema.json如下：

{
    "$schema": "http://json-schema.org/schema",
    "id": "HelloWorldSchematics",
    "title": "Hello World Options Schema",
    "type": "object",
    "properties": {
      "listName": {
        "type": "string",
        "description": "The name of the list.",
        "$default": {
          "$source": "argv",
          "index": 0
        },
        "x-prompt": "What's the name of list"
      },
      "colNames": {
        "type": "array",
        "items": {
            "type": "string"
        },
        "description": "The name of the columns.",
        "x-prompt": "What's the name of columns"
      }
    },
    "required": [
        "listName",
        "colNames"
    ]
}

扩展现有 Angular 原理图的最佳方法是什么？我目前正在专门考虑将一些默认代码添加到组件的规范文件中，但更通用的答案将不胜感激。

在我发现的教程中，它们显示了 externalSchematic 函数，这似乎是在正确的轨道上，但它们都没有显示如何更新/替换该原理图的模板文件。我尝试过将模板复制到原理图中并应用/合并它们，但这似乎有点矫枉过正。Angular 关于此事的文档似乎也很少。

有没有办法扩展默认原理图，或者我需要从头开始做所有事情？