✒️Creating my first schematic

Getting Started with Angular Schematics

if you are using vscode, check this article to load schemas: https://bobbyhadz.com/blog/unable-to-load-schema-from-vscode-cannot-open

Goals for this section:

• Create our first schematics project.
• Setup a basic configurations to use the our first schematic.
• Create our first schematic.

Prerequisites

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

1. Execute: schematics blank --name=[library-name]replace [library-name] with your library name, in my case I will named it like this: schematics blank --name=schematics-library-poc.
2. Inside your project, remove the folder name: [library-name] in my case I will delete: schematics-library-poc
3. Create these folders: ng-add, ng-generate, utilities.
4. In ng-add create this files: schema.json, ng-add.factory.ts.
5. Inside ng-add.factory.ts create the next method:

import { Rule } from "@angular-devkit/schematics";

export function main(): Rule {
 return () => {};
}

1. Go to collection.json and remove the schematic default in schematics section:
2. Add the ng-add schematic into schematic section incollection.json like that:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "To make actions before the library will be install",
      "factory": "./ng-add/ng-add.factory#main",
      "schema": "./ng-add/schema.json"
    }
}

Now, we can continue creating our first schematic.

1. go to ng-generate folder and create a folder inside named: my-schematic.
2. add the factory: my-schematic.factory.ts

import {Rule} from "@angular-devkit/schematics";

export function myFirstSchematic(): Rule {
    return () => {
   console.log('Hello world'); 
  };
}

1. add the schema:schema.json.

{
  "$schema": "http://json-schema.org/schema",
  "$id": "MyFirstSchematic",
  "title": "My first schematic schema",
  "type": "object",
  "properties": {
  }
}

1. go to schematic.factory.ts and add a function named: main.
2. now, we can register the schematic. go to collection.json and add something like:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
  "ng-add": {
      "description": "To make actions before the library will be install",
      "factory": "./ng-add/ng-add.factory#main",
      "schema": "./ng-add/schema.json"
    },
    "my-schematic": {
      "description": "My first schematic",
      "factory": "./ng-generate/my-schematic/my-schematic.factory#myFirstSchematic",
      "schema": "./ng-generate/my-schematic/schema.json",
      "aliases": ["ms"]
    }}

Before test our first schematic we need to add some command into script section in package.json

"build:watch": "tsc -p tsconfig.json --watch"

After that we can run npm run build:watch

We are ready to test our first schematic. In another terminal run this command:

schematics ./src/collection.json:my-schematic

Congratulations!

You ran your first schematic!

Conclusion

We could do those goals:

• Create our first schematics project.
• Setup a basic configurations to use the our first schematic.
• Create our first schematic.

What’s next?

In the next articles we’ll see:

• What are Rules and how to use them?

📔What the hell is a Schema JSON in schematics?