The Ultimate Guide to Angular Schematics: Creating Custom Automations

Are you tired of repetitive tasks when building Angular applications? Do you want to improve your productivity and efficiency? Look no further! In this comprehensive guide, we will delve into the world of Angular Schematics and explore how they can revolutionize your development process. Whether you are a beginner or an experienced developer, these articles will equip you with the knowledge and skills to create custom automations using Angular Schematics.

What is the main purpose of this article series?

The primary objective of creating this series of articles revolves around two key reasons:

1. Empower Angular developers: We aim to provide developers with the means to automate repetitive tasks and minimize errors during Angular application development. By leveraging Angular Schematics, developers can streamline workflows, boost productivity, and ensure code accuracy.
2. Foster a thriving community: We recognize the need for enhanced support and resources around Angular Schematics. Through this series, we hope to encourage widespread adoption and create a strong community of developers. By uniting developers who embrace Angular Schematics, we can influence the Angular team to provide tailored support and drive the evolution of this powerful tool. Together, we unlock the full potential of Angular Schematics for the benefit of the community.

Note

In this first article, we cover all the fundamental concepts of schematics. If you’re eager to get straight to the practical action, feel free to jump to the next article.

Why Angular Schematics?

Angular Schematics are an essential tool in the Angular ecosystem that enables automatic code generation and modification. They provide a standardized methodology to create, update, and delete files, components, services, and more. By using Angular Schematics, you can streamline your development workflow, reduce boilerplate code, enforce coding standards, and ensure consistency across projects. Automating repetitive tasks allows you to focus on solving real challenges and delivering high-quality software.

Anatomy of an Angular Schematic

When you create a angular schematic library or create your custom schematic inside your project you can see three important files: collection.json, schema.json, index.ts.

Collection.json

It is where you expose every schematic. If you don’t add your schematic there you cannot access it.

There you can specify the schema.json and the factory function.

Additionally, if your schematic name is lengthy, you have the option to include aliases. This allows for more concise and manageable references to your schematic within the collection file.

In future articles, we can delve deeper into this file to gain a better understanding and configure it in more detail.

schema.json

This file helps you to define all the information about your schematic, from the name and ID to the questions you want to ask the users.

index.ts

The index.ts file, also known as the factory, plays a vital role in Angular schematics. It is responsible for creating the schematic logic, defining its structure, and handling user input.

Within this file, you define the main function that encapsulates all the logic of your schematic. This function serves as the entry point for executing the desired actions and transformations within the schematic.

One crucial step is to ensure that the name of the main function is added to the collection file, specifically in the factory path. For example, “factory”: “./ng-generate/configureProject/index#configureProject”.

By organizing and structuring your schematic logic in the index.ts file and properly configuring the factory path, you ensure that your schematic is correctly integrated and easily accessible within the Angular schematics ecosystem.

Angular schematic Concepts

When you begin creating the logic of your schematic, you will encounter three key concepts or interfaces: Rule, Tree, and Context.

Rule

It is a simple function that has two parameters: tree and context. However, it represents a set of instructions or actions that define the desired transformations to be applied to a project. The function encapsulates the logic and operations required to modify or generate files, update configurations, and perform various tasks during schematic execution. Think of the Rule as a blueprint that guides the behavior of a schematic. It allows developers to define the specific steps and transformations necessary to automate repetitive tasks and modify the project's structure or configuration. By leveraging the Rule, developers can create custom rules that encapsulate their desired modifications and apply them consistently across multiple projects, thereby enhancing productivity and maintaining code quality.

You can create one rule by returning this function or create multiple rules using a chain object. The schematic will execute each rule in the order in which they were added. It’s the same thing when you execute more than one schematic they will execute in the order in which they were invoked.

For these reasons, it’s recommended that when invoking a function in Angular schematics, it should either return a Rule. By doing so, you ensure a more organized and structured approach to handling the required modifications or actions while maintaining the consistency and reusability of your code.

Tree

The Tree interface represents the abstract representation of a file system. It provides a set of methods and utilities to interact with files and directories within a project’s structure. Think of the Tree interface as a powerful tool that allows you to programmatically traverse, read, write, and manipulate files and directories.

Using this interface, you gain access to all the files and folders within your Angular workspace. However, for the changes to take effect, the Tree object needs to be wrapped and returned within a Rule function. This ensures that the modifications performed on the Tree are properly executed and integrated into your project’s file system.

Context or SchematicContext

The SchematicContext interface in Angular schematics represents the contextual information and utilities available during the execution of a schematic. It provides a range of methods and properties that enable interaction with the schematic environment and facilitate communication with the user.

Through the SchematicContext interface, developers can access essential contextual information, including the project’s configuration, workspace path, and logger. This enables them to gather relevant data about the project being modified and utilize it within the schematic logic. Additionally, the SchematicContext interface allows for the invocation of other external or internal schematics.

For example, developers can extend an Angular CLI schematic, such as:

ng g component

Incorporating additional behavior or include extra files like storybook or GraphQL files as part of the component generation process.

In this example, you can add some additional behavior or add another files like storybook or graphql files to the existing component schematic.

Conclusion

In this first article of our Angular Schematics series, we have explored the fundamentals and key concepts that lay the groundwork for creating custom automations. We have learned about the purpose and benefits of using Angular Schematics, as well as the anatomy of a schematic and the important roles of the Rule, Context and Tree.

The next articles we will be split into two:
1. Creating an Angular schematic library.
2. Creating internal custom angular schematics for angular projects.