angular-schematics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Schematics

Version: Angular 21 (2025) Tags: Schematics, Generators, CLI, Code Generation

References: Schematics Guide • @schematics/angular

版本： Angular 21 (2025) 标签： Schematics、Generators、CLI、代码生成

参考资料： Schematics指南 • @schematics/angular

Best Practices

最佳实践

Create schematic

bash

npm install -g @angular-devkit/schematics-cli
schematics schematics .:my-schematic

Create rule

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    tree.create(options.path + '/file.ts', 'content');
    return tree;
  };
}

Use templates

import { apply, url, template } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  const templateSource = apply(url('./files'), [
    template({ ...options }),
    move(options.path)
  ]);
  return chain([mergeWith(templateSource)]);
}

创建schematic

bash

npm install -g @angular-devkit/schematics-cli
schematics schematics .:my-schematic

创建规则

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    tree.create(options.path + '/file.ts', 'content');
    return tree;
  };
}

使用模板

import { apply, url, template } from '@angular-devkit/schematics';

export function myScheme(options: any): Rule {
  const templateSource = apply(url('./files'), [
    template({ ...options }),
    move(options.path)
  ]);
  return chain([mergeWith(templateSource)]);
}