🫀Angular Schematic Anatomy

Welcome to the world of code automation!

Schematics in Angular are similar to a code-generating library, streamlining the development process through automation. To understand the true essence of Angular Schematic projects, it’s essential to differentiate between implementation and compilation. This article focuses on the implementation, offering insights valuable for both novices and seasoned experts.

Let’s demystify the appearance of a typical schematic project:

A standard schematic project features a structured architecture that includes:

• Collection file
• Schematics split into: NG-ADD, NG-GENERATE
• The ng-add directory contains schematics that the Angular CLI looks for during library installation, which you can skip for non-Angular implementations. The ng-generate directory houses all the custom schematics you'll craft.

Understanding schematics deeply involves three pivotal concepts: Factory, Rule, and Tree.

• The Factory: This is where you define and manage your schematic, including handling user inputs. It’s declared within the collection of schematics.
• The Rule: It signifies a singular transformation step, allowing for file modifications, dependency additions, and more. Factories yield one or more rules, which are functions returning another rule with specific parameters.
• The Tree: This symbolizes the file system, providing the means to traverse, read, and alter files. It’s imperative to comprehend these components to develop effective schematics.

Note: The Tree only reflects directories where it’s placed, and won’t access parent directories if executed within a subfolder.

When crafting a schematic, familiarize yourself with the collection.json, schema.json, and index.ts or [factory-name].factory.ts files.

collection.json

This JSON file encapsulates details about all schematics within your project, dictating the declaration for each schematic. It’s what the CLI references upon using your library. Each schematic in the collection must define several properties, as shown in the example below.

We can see an example of a collection:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "ng-add": {
      "description": "Add the library to the project",
      "factory": "./ng-add/index",
      "schema": "./ng-add/schema.json"
    },
    "scan": {
      "description": "Scan project and represent into a json file",
      "factory": "./ng-generate/scan-project/index#scan",
      "aliases": [
        "s"
      ]
    },
    "build": {
      "description": "Execute all the schematics with the json file",
      "factory": "./ng-generate/build/index#executeWorkspaceSchematics",
      "aliases": [
        "b"
      ]
    },
    "checkPackages": {
      "description": "Check collections",
      "factory": "./ng-generate/check-packages/index#checkPackages",
      "hidden": true
    },
    "checkProjects": {
      "description": "Check collections",
      "factory": "./ng-generate/check-projects/index#checkProjects",
      "hidden": true
    },
    "uninstallPackages": {
      "description": "Uninstall collections",
      "factory": "./ng-generate/uninstall-packages/index#uninstallPackages",
      "hidden": true
    },
    "AddCollectionsAngularJson": {
      "description": "Add collections to angular.json",
      "factory": "./ng-generate/add-collections-angular-json/index#AddCollectionsAngularJson",
      "hidden": true
    }
  }
}

schema.json

This file outlines the prompts presented to users before the factory initiates, dictating the interaction flow.

index.ts

The name of this file refers to a specific factory and must be consistently referenced in the collection.json for each schematic.

Now that you’ve got the basics, it’s time to roll up your sleeves and create your first schematic project.

Happy coding!

✒️Creating my first schematic