How do you set up and use Angular Schematics for customizing the CLI?

Angular Schematics is a powerful tool to customize the Angular CLI and to improve your development experience by generating custom code and templates. To set up and use Angular Schematics, follow these steps:

### 1. Install the necessary tools

First, make sure you have installed the latest version of Node.js and npm. Next, install Angular CLI globally by running:

npm install -g @angular/cli

Now, you need to install Schematics CLI by running:

npm install -g @angular-devkit/schematics-cli

### 2. Create a custom schematic project

To start with a new schematic project, run:

schematics blank --name=my-custom-schematic

This will create a new folder called ‘my-custom-schematic‘ and setup the initial files and folder structure needed for the schematic.

### 3. Develop your custom schematic

Now, navigate to the newly created folder:

cd my-custom-schematic

You can find the ‘src‘ folder, which contains a file called ‘index.ts‘. This is where your custom schematic logic and code generation will reside. You can import the necessary tools and functions from ‘@angular-devkit/schematics‘ and ‘@schematics/angular‘.

Here’s a simplified example to demonstrate generating a custom component using schematics:

// src/index.ts

import { Rule, SchematicContext, Tree, url, apply, template, chain, mergeWith } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';

export function myCustomComponent(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    // Create template source
    const sourceTemplates = url('./files');

    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ...options,
        ...strings
      }),
    ]);

    // Merge the changes
    return chain([
      mergeWith(sourceParametrizedTemplates),
    ]);
  };
}

In this example, we generate a template from the ‘./files‘ folder, and then apply the ‘template‘ function to replace placeholders in the template.

Create a folder named ‘files‘ inside the ‘src‘ folder, and add the following custom component template file ‘my-component.component.ts‘:

// src/files/my-component.component.ts

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

@Component({
  selector: '<%= dasherize(name) %>',
  template: `
    <div>{{ title }}</div>
  `,
})
export class <%= classify(name) %>Component {
  title = '<%= name %> works!';
}

Inside the template file, we use placeholder tags like ‘<%= classify(name) %>‘ and ‘<%= dasherize(name) %>‘ to generate component name and selector dynamically.

### 4. Build the custom schematic

Before using the custom schematic, build it by running:

npm run build

### 5. Use your custom schematic

To use your custom schematic in an Angular project, first, make sure you are inside an Angular project directory. Then, use the ‘ng generate‘ command, specifying the schematic path and options. For generating a new custom component with the name ‘test‘ using our custom schematic, the command is:

ng generate ../path/to/my-custom-schematic/src/collection.json:myCustomComponent --name=test

The custom schematic generates a new component file named ‘test.component.ts‘ with the provided options.

That’s it! You’ve now set up and used Angular Schematics for customizing the CLI. You can extend this further by adding more templates, features, and options to suit your specific requirements.