Schematics

1. mkdir src/app/feature-name2. create feature.component.ts         (from memory or a previous component)3. create feature.component.html4. create feature.component.scss5. create feature.service.ts6. Manually update app.routes.ts       (forgot? broken navigation)7. Manually update app.config.ts       (forgot to register the service? runtime error)8. 15 minutes, 3 files to copy-paste, 2 files to manually edit, 1 typo

ng generate feature my-feature            │            ▼Angular loads the schematic's factory function with options = { name: 'my-feature' }            │            ▼Factory returns a Rule — a function (tree, context) => tree            │            ▼Rule runs against the virtual Tree:  • apply(url('./files'), [template(options), move(path)]) → new files in Tree  • tree.read('src/app/app.routes.ts') → reads existing file  • tree.overwrite(routesPath, updatedContent) → writes to Tree (not disk yet)            │            ▼All rules succeed → Angular commits Tree changes to real disk atomically(If any rule throws → no disk changes, Tree discarded)

// A Rule transforms a Tree into a new Treetype Rule = (tree: Tree, context: SchematicContext) => Tree | Observable<Tree> | Rule | void;
// Tree — virtual file systeminterface Tree {  exists(path: string): boolean;  read(path: string): Buffer | null;  create(path: string, content: string | Buffer): void;  overwrite(path: string, content: string | Buffer): void;  delete(path: string): void;  rename(from: string, to: string): void;}
// SchematicContext — logger, task scheduling, engine accessinterface SchematicContext {  logger: logging.LoggerApi;   // .info(), .warn(), .error()  addTask(task: TaskConfigurationGenerator): TaskId;}

npm install -g @angular-devkit/schematics-clischematics blank --name=my-schematicscd my-schematicsnpm install

my-schematics/├── src/│   └── my-schematics/│       └── index.ts           ← rule factory├── collection.json             ← schematic registry├── package.json└── tsconfig.json

{  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",  "schematics": {    "my-schematics": {      "description": "A custom schematic.",      "factory": "./my-schematics/index#mySchematics",      "schema": "./my-schematics/schema.json"    }  }}

{  "$schema": "http://json-schema.org/schema",  "type": "object",  "title": "Feature Schematic",  "properties": {    "name": {      "type": "string",      "description": "The feature name (used to name generated files)",      "$default": { "$source": "argv", "index": 0 }    },    "path": {      "type": "string",      "description": "The path to create the feature in",      "default": "src/app",      "format": "path"    },    "withService": {      "type": "boolean",      "description": "Whether to generate a service alongside the component",      "default": true    }  },  "required": ["name"]}

// src/my-schematics/index.tsimport {  Rule, SchematicContext, Tree,  apply, chain, mergeWith, move, template, url,} from '@angular-devkit/schematics';import { strings } from '@angular-devkit/core';import { Schema } from './schema';
export function mySchematics(options: Schema): Rule {  return (tree: Tree, context: SchematicContext) => {    context.logger.info(`Generating feature: ${options.name}`);
    // Build file source from template files in ./files directory    const templateSource = apply(url('./files'), [      template({        ...options,               // spread options for use in templates        ...strings,               // dasherize, classify, camelize, capitalize      }),      move(options.path),         // write to target path    ]);
    // Chain multiple rules together    return chain([      mergeWith(templateSource),    ])(tree, context);  };}

src/my-schematics/files/└── __name@dasherize__/    ├── __name@dasherize__.component.ts.template    ├── __name@dasherize__.component.html.template    └── __name@dasherize__.service.ts.template

__name@dasherize__ → user-profile__name@classify__  → UserProfile__name@camelize__  → userProfile

// __name@dasherize__.component.ts.templateimport { Component, inject } from '@angular/core';import { <%= classify(name) %>Service } from './<%= dasherize(name) %>.service';
@Component({  selector: 'app-<%= dasherize(name) %>',  standalone: true,  templateUrl: './<%= dasherize(name) %>.component.html',})export class <%= classify(name) %>Component {  private service = inject(<%= classify(name) %>Service);}

import { Component, inject } from '@angular/core';import { ProductListService } from './product-list.service';
@Component({  selector: 'app-product-list',  standalone: true,  templateUrl: './product-list.component.html',})export class ProductListComponent {  private service = inject(ProductListService);}

npm run build
# Test locally without installing to a projectschematics .:my-schematics --name=product-list --dry-run
# Apply for realschematics .:my-schematics --name=product-list
# Test inside an Angular project (link the package first)npm linkcd ../my-angular-projectnpm link my-schematicsng generate my-schematics:my-schematics product-list

import {  Rule, SchematicContext, Tree,  apply, chain, mergeWith, move, template, url, noop,} from '@angular-devkit/schematics';import { strings } from '@angular-devkit/core';
export function feature(options: FeatureSchema): Rule {  return chain([    // Rule 1 — generate files from templates    mergeWith(      apply(url('./files'), [        template({ ...options, ...strings }),        move(options.path),      ])    ),
    // Rule 2 — add route to app.routes.ts    addRouteToRoutes(options),  ]);}
function addRouteToRoutes(options: FeatureSchema): Rule {  return (tree: Tree, context: SchematicContext) => {    const routesPath = 'src/app/app.routes.ts';    const buffer = tree.read(routesPath);
    if (!buffer) {      context.logger.warn(`Could not find ${routesPath}. Skipping route registration.`);      return tree;    }
    const content = buffer.toString('utf-8');    const dasherized = strings.dasherize(options.name);    const classified = strings.classify(options.name);
    // Build the new route entry    const newRoute = `  {    path: '${dasherized}',    loadComponent: () => import('./${dasherized}/${dasherized}.component')      .then(m => m.${classified}Component),  },`;
    // Insert before the closing bracket of the routes array    const updated = content.replace(      '];',      `${newRoute}\n];`    );
    tree.overwrite(routesPath, updated);    context.logger.info(`✔ Added route /${dasherized} to app.routes.ts`);    return tree;  };}

// my-library/package.json{  "schematics": "./schematics/collection.json"}

// schematics/collection.json{  "schematics": {    "ng-add": {      "description": "Add my-library to an Angular project",      "factory": "./ng-add/index#ngAdd"    }  }}

// schematics/ng-add/index.tsimport {  Rule, SchematicContext, Tree, chain,} from '@angular-devkit/schematics';import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';import { addRootProvider } from '@schematics/angular/utility';
export function ngAdd(): Rule {  return chain([    // Rule 1 — add the provider to app.config.ts    addRootProvider('my-library', ({ code, external }) =>      code`${external('provideMyLibrary', 'my-library')}()`    ),
    // Rule 2 — install npm packages (runs after all file changes)    (_tree: Tree, context: SchematicContext) => {      context.addTask(new NodePackageInstallTask());      context.logger.info('Installing dependencies...');    },  ]);}

// ❌ Direct filesystem write — breaks dry-run and rollbackimport * as fs from 'fs';export function mySchematic(): Rule {  return (tree: Tree) => {    fs.writeFileSync('src/app/new.ts', content);  // always writes, even on dry-run    return tree;  };}
// ✅ Write through the Tree — respects dry-run and is atomicexport function mySchematic(): Rule {  return (tree: Tree) => {    tree.create('src/app/new.ts', content);    return tree;  };}

// ❌ console.log — bypasses CLI formattingexport function mySchematic(): Rule {  return (tree: Tree, context: SchematicContext) => {    console.log('Done!');   // raw output, no formatting    return tree;  };}
// ✅ context.logger — properly formatted CLI outputexport function mySchematic(): Rule {  return (tree: Tree, context: SchematicContext) => {    context.logger.info('✔ Done!');    // info (green checkmark)    context.logger.warn('⚠ Check config');  // warning (yellow)    context.logger.error('✗ Failed');  // error (red)    return tree;  };}

# ❌ Edit index.ts, then immediately run — stale JSschematics .:my-schematic --dry-run
# ✅ Always build first (or use watch mode during development)npm run buildschematics .:my-schematic --dry-run
# Better: use watch mode while developingnpm run watch &schematics .:my-schematic --dry-run

// ❌ Overwrites the entire file with just the new import linetree.overwrite('src/app/app.config.ts', `import { myProvider } from 'my-lib';`);
// ✅ Read existing content, modify, overwrite with modified versionconst existing = tree.read('src/app/app.config.ts')?.toString('utf-8') ?? '';const modified = existing.replace(  'providers: [',  'providers: [\n    myProvider(),');tree.overwrite('src/app/app.config.ts', modified);