Customizing Angular CLI Commands Using Schematics

The Angular CLI is a powerful tool and the de facto solution for working with Angular applications. It eliminates most of the boilerplate code and configuration from the developer and allows them to focus on the fun stuff, which is building awesome Angular applications. Apart from enhancing the Angular development experience, it can be easily customized to the needs of each developer.

The Angular CLI contains a set of useful commands for building, bundling, and testing Angular applications. It also provides a collection of special commands, called schematics, that generate various Angular artifacts such as components, modules, and services. Schematics expose a public API that developers can use to create their own Angular CLI commands or extend the existing ones.

In this chapter, we will cover the following details about schematics:

• Installing the Schematics CLI
• Creating a Tailwind CSS component
• Creating...

Essential background theory and context

Angular schematics are libraries that can be installed using npm. They are used in various situations, including creating components that share a standard user interface or enforcing conventions and coding guidelines inside an organization. A schematic can be used as a standalone or as a companion for an existing Angular library.

Angular schematics are packaged into collections and reside in the @schematics/angular npm package. When we use the Angular CLI to run the ng add or the ng build command, it runs the appropriate schematic from that package. The Angular CLI currently supports the following types of schematics:

• Add: Installs an Angular library in an Angular CLI workspace using the ng add command.
• Update: Updates an Angular library using the ng update command.
• Generate: Generates Angular artifacts in an Angular CLI workspace using the ng generate command.

In this project, we will focus on generating...

Project overview

In this project, we will learn how to use the Schematics API to build custom Angular CLI generation schematics for creating components, services, and directives. First, we will build a schematic for creating an Angular component that uses the Tailwind CSS framework in its template. Then, we will create a schematic to generate an Angular service that injects the built-in HTTP client by default and creates one method for each HTTP request in a CRUD operation. The following diagram describes an architectural overview of the project:

Figure 10.1 – Project architecture

Build time: 1 hour

Getting started

The following prerequisites and software tools are required to complete this project:

• Angular CLI: A command-line interface for Angular, which you can find at https://angular.io/cli.
• GitHub material: The code for this chapter can be found in the Chapter10 folder at https://github.com/PacktPublishing/Angular-Projects-Third-Edition.

Installing the Schematics CLI

The Schematics CLI is a command-line interface that we can use to interact with the Schematics API. To install it, run the following npm command:

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

The preceding command will install the @angular-devkit/schematics-cli npm package globally on our system. We can then use the schematics executable to create a new collection for the schematics:

schematics blank my-schematics

The previous command will generate a schematics project called my-schematics. It contains a schematic with the same name by default inside the src folder. A schematic includes the following files:

• collection.json: A JSON schema that describes the schematics that belong to the my-schematics collection.
• my-schematics\index.ts: The main entry point of the schematic.
• my-schematics\index_spec.ts: The unit test file of the main entry point of the schematic.

The JSON schema file of the collection contains...

Creating a Tailwind CSS component

Tailwind is a very popular CSS framework that enforces a utility-first core principle. It contains classes and styles that can be used in Angular applications to create easily composable user interfaces.

We will use the Schematics API of the Angular CLI to build a generation schematic for Angular components. The schematic will generate a new Angular component styled with a Tailwind container layout.

The schematic we will build does not need Tailwind CSS installed by default. However, the application in which we will use the schematic does require it.

Let’s see how we can accomplish that:

1. Execute the following command to add a new schematic to our collection:

   schematics blank tailwind-container
   

   The preceding command will update the collection.json file to contain a new entry for the tailwind-container schematic. It will also create a tailwind-container folder in the src folder of our workspace...

Creating an HTTP service

We will create a schematic for our schematics library that scaffolds an Angular service. It will generate a service that imports the built-in HTTP client. It will also contain one method for each HTTP request involved in a CRUD operation.

The generation schematic we will build will not stand on its own. Instead, we will combine it with the existing generation schematic of the Angular CLI for services. Thus, we do not need a separate JSON schema.

Let’s get started by creating the schematic:

1. Execute the following command to add a new schematic to our collection:

   schematics blank crud-service
   

2. Run the following command to install the @schematics/angular npm package:

   npm install @schematics/angular
   

3. Open the collection.json file and modify the crud-service schematic:

   "crud-service": {
     "description": "Generate a CRUD HTTP service.",
     "factory"...

Summary

In this project, we used the Schematics API of the Angular CLI to create custom schematics for our needs. We built a schematic for generating Angular components that contain Tailwind CSS styles in their templates. We also built another schematic that creates an Angular service to interact with the built-in HTTP client. The service includes all the necessary artifacts for working with an HTTP CRUD application.

The Angular CLI is a flexible and extensible tool that enhances the development experience dramatically. The imagination of each developer is all that limits what can be done with such an asset in their toolchain. The CLI and the Angular framework allow developers to create excellent web applications.

As we have learned throughout this book, the popularity of the Angular framework in the web developer world is so great that it is straightforward to integrate it today with any technology and create fast and scalable Angular applications. So, we encourage you to...

Exercise

Use the Schematics CLI to create an Angular schematic for generating an Angular directive. The directive should inject the ElementRef and Renderer2 services from the @angular/core npm package in to the constructor of the TypeScript class.

You should follow the same approach as we did for the component schematic in the Creating a Tailwind CSS component section.

You can find the solution in the Chapter10 folder of the exercise branch in the GitHub repository for this chapter.

Further reading

• Schematics overview: https://angular.io/guide/schematics
• Authoring schematics: https://angular.io/guide/schematics-authoring
• Schematics for libraries: https://angular.io/guide/schematics-for-libraries
• Angular CLI built-in schematics: https://github.com/angular/angular-cli/tree/master/packages/schematics/angular