Angular Schematics

Angular Schematics are powerful tools for automating tasks and scaffolding projects in Angular. This guide covers the basics of creating and using Angular Schematics to streamline your development workflow.

Setting Up Angular Schematics

First, install the Angular CLI globally if you haven't already:

npm install -g @angular/cli

Creating a New Schematic

Create a new collection of schematics using the Angular CLI:

ng new my-schematics --collection

Developing a Schematic

Navigate to the schematics folder and develop your custom schematic. For example, to create a component schematic:

// src/my-schematics/schematics/my-component/index.ts
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';
import { apply, mergeWith, template, url } from '@angular-devkit/schematics';

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

    return mergeWith(sourceParameterizedTemplates)(tree, _context);
  };
}

Creating Template Files

Create the template files for your schematic:

// src/my-schematics/schematics/my-component/files/__name@dasherize__/__name@dasherize__.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-<%= dasherize(name) %>',
  templateUrl: './<%= dasherize(name) %>.component.html',
  styleUrls: ['./<%= dasherize(name) %>.component.css']
})
export class <%= classify(name) %>Component {}

// src/my-schematics/schematics/my-component/files/__name@dasherize__/__name@dasherize__.component.html
<%= dasherize(name) %> works!

// src/my-schematics/schematics/my-component/files/__name@dasherize__/__name@dasherize__.component.css
/* Add component styles here */

Updating the Collection

Update the collection file to include your new schematic:

// src/my-schematics/collection.json
{
  "schematics": {
    "my-component": {
      "description": "A custom schematic to generate a new component",
      "factory": "./schematics/my-component/index#myComponent"
    }
  }
}

Building and Testing the Schematic

Build and test your schematic locally:

npm run build
schematics .:my-component --name=test-component

Publishing the Schematic

Publish your schematic to npm to share it with others:

npm login
npm publish

Using Schematics in Projects

To use your published schematic in a project, install it as a dependency and run it using the Angular CLI:

ng add my-schematics
ng generate my-schematics:my-component --name=new-component

Key Points

Conclusion

Angular Schematics provide a powerful way to automate tasks and streamline your development workflow. By creating and using custom schematics, you can improve efficiency and maintainability in your Angular projects. Happy coding!