In the previous posts we read an overview of what schematics are and what they’re used for, the important vocabulary to follow the next posts, as well as a quick reference to the most important and useful methods from the Schematics API.

Now we will actually write schematics!

Make sure you have the following packages installed at a global level in your computer. Notice that in a real life development context, you may have some of those local to your project. But for the sake of having a stable development environment, we will globally install them.

node v12.8.0
npm v.6.10.2
@angular-cli (core y cli) v.10
@schematics/angular
@schematics/schematics@0.1000.5

requirements to follow this guide

Now we’re ready to…

Generate our first blank schematic

Generating a blank schematic is super straight forward with the schematics-cli.

Go to the folder where you want your schematics to be at and type in your terminal:

$ schematics blank --name=indepth-dev-schematic

command to generate a blank schematic

As you can already appreciate, we’re simply invoking the schematics function to generate a blank schematic, and we’re passing the name of the collection, as option.

If we inspect the generated folder, we can verify it’s an npm package, featuring a package.json with necessary dependencies, and the node_modules folder.

We will also find a tsconfig.json file, and a scr folder.

Let’s focus in the contents of the src folder

+ src
--- collection.json
--- + indepth-dev-schematic
------ index.ts
------ index_spec.ts

contents of the folder generated

#angular #javascript #web-development #programming #developer