In the fast-paced world of web development, efficiency and consistency are key. Repetitive tasks can slow down productivity, and inconsistent code can lead to maintenance nightmares. Enter Angular Schematics—a powerful tool to automate code generation, enforce architectural standards, and improve code quality. In this comprehensive guide, we’ll delve into creating custom Angular schematics, helping you streamline your development workflow and ensure your codebase remains robust and maintainable.

What are Angular Schematics?

Angular Schematics are code generators that transform a software project by creating, modifying, or removing files and code snippets. They’re integral to the Angular CLI (Command Line Interface) and are used to scaffold new applications, add features, and enforce best practices.

Why Create Custom Schematics?

While Angular provides a suite of built-in schematics for common tasks, creating custom schematics allows you to:

  • Automate repetitive coding tasks specific to your project’s needs.
  • Enforce coding standards and architectural guidelines.
  • Integrate custom templates and boilerplate code.
  • Enhance productivity by reducing manual setup time.

Getting Started with Custom Angular Schematics

Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v10.13 or later)
  • Angular CLI (v12 or later)
  • A code editor (VS Code is recommended)

Step 1: Set Up a New Schematic Project

First, let’s create a new Angular schematic project. Open your terminal and run:

1

ng new custom-schematics --collection=@angular-devkit/schematics-cli

This command sets up a new Angular project with the necessary dependencies for creating schematics.

Step 2: Create a Schematic

Navigate to your project directory:

1

cd custom-schematics

Create a new schematic using the Angular CLI:

1

ng generate @schematics/angular:schematic my-schematic

This command generates the basic structure for your schematic, including the necessary files and folders.

Step 3: Define the Schematic Logic

Open the my-schematic/index.ts file. This is where you’ll define the logic for your schematic. Here’s a basic example that creates a new component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { Rule, SchematicContext, Tree, apply, mergeWith, template, url } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
import { Schema as ComponentOptions } from '@schematics/angular/component/schema';

export function mySchematic(options: ComponentOptions): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files');
    const sourceParameterizedTemplates = apply(sourceTemplates, [
      template({
        ...options,
        ...strings,
      }),
    ]);
    return mergeWith(sourceParameterizedTemplates)(tree, _context);
  };
}

Step 4: Create Templates

In the same directory (my-schematic), create a folder named files and add your template files. For a component, you might have:

files/
  __name__.component.ts
  __name__.component.html
  __name__.component.scss

Use double underscores to indicate placeholders that will be replaced by your schematic logic. For example, __name__.component.ts might look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-__name__',
  templateUrl: './__name__.component.html',
  styleUrls: ['./__name__.component.scss']
})
export class __name__Component implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

Step 5: Configure the Schematic

Open src/collection.json and add your schematic configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

Step 6: Test Your Schematic

Run the schematic to test it:

1

ng generate ./path/to/your/schematic:my-schematic --name=test

This command generates a new component named test using your custom schematic.

Conclusion

Creating custom Angular schematics can significantly enhance your development workflow by automating repetitive tasks and enforcing code standards. By following this guide, you’ve learned how to set up a schematic project, define schematic logic, create templates, and configure and test your schematic. With these tools, you can ensure consistency and quality in your Angular projects, allowing you to focus on building features and delivering value to your users.

By leveraging custom Angular schematics, you can take your development efficiency to the next level.