Using Angular CLI Schematics

If you’re like me, when you started out working in Angular (especially when it first arrived), you quickly became exhausted by the shear number of files and configurations you had to set. Creating a new component entailed manually creating three separate files and ensuring they were put properly inside the module. Once your project began to grow, this task started to become a chore.

In comes Angular Schematics.

Angular Schematics were introduced by the Angular team in 2018, and it provides an API to generate and manage files in your Angular project, as well as providing any required dependencies. Think of it like a templating tool.

In this article, I will show you how you can leverage the built-in schematics to streamline your Angular development.

Setup

The first thing we need to do is install the Angular CLI.

$ npm install -g @angular/cli@latest

Once that’s done, we can create a new project by running

$ ng new my-app

You now have a project and want to start populating it with stuff: components, services, directives, guards, etc. Each of these entities can be generated using a schematic. Pass the name of this schematic as an argument for:

$ ng generate 

The component schematic

To generate a component named DashboardComponent, we use the component schematic:

$ ng generate component dashboard
CREATE src/app/dashboard/dashboard.component.scss (0 bytes)
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (282 bytes)
UPDATE src/app/app.module.ts (487 bytes)

You’ll notice that the CLI created four separate files (a stylesheet, HTML template, test spec, and TypeScript document) and also updated the module as well. We can verify that it was added by checking inside app.module.ts:

import { DashboardComponent } from './dashboard/dashboard.component';

...

@NgModule({
  declarations: [
    DashboardComponent
  ],

...

The CLI will also construct the component such that the models will have PascalCase names and the directories will be kebob-case.

So the following inputs:

$ ng generate dashboard-settings

and

$ ng generate DashboardSettings

will produce the same results.

The service schematic

We can create a service called SocketService by using the service schematic:

$ ng generate service socket
CREATE src/app/services/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket.service.ts (135 bytes)

By default, this will not generate a new directory for the service, but rather will generate the service and test file in the current path. You can change this by setting --flat false:

$ ng generate service socket --flat false
CREATE src/app/services/socket/socket.service.spec.ts (333 bytes)
CREATE src/app/services/socket/socket.service.ts (135 bytes)

Also note that this does not automatically add the service to your NgModule so you will need to add it yourself.

The guard schematic

The guard schematic will ask for the type of interface you want to implement: CanActivate, CanActivateChild, or CanLoad. Pass this in directly using the --implements argument or type it in interactively.

To generate a guard called AuthGuard that implements CanActivate, type:

$ ng generate guard auth --implements CanActivate
CREATE src/app/auth.guard.spec.ts (346 bytes)
CREATE src/app/auth.guard.ts (456 bytes)

Opening up the generated file will show that it implements the CanActivate interface.

The pipe schematic

The pipe schematic will generate a Pipe in the current directory and add it to the main module. You can also specify the module using the --module argument. You also have the option of specifying that the pipe should be exported.

To generate a pipe called PhonePipe that will be exported, call the following:

$ ng generate pipe phone --export
CREATE src/app/phone.pipe.spec.ts (183 bytes)
CREATE src/app/phone.pipe.ts (203 bytes)
UPDATE src/app/app.module.ts (696 bytes)

Opening up app.module.ts reveals that PhonePipe has been added to the module.

import { PhonePipe } from './phone.pipe';
...

@NgModule({
  declarations: [
    PhonePipe
  ],
...
  exports: [PhonePipe]
...

The directive schematic

The directive schematic will generate an Angular directive. By default, the directive will be added to the module.

To generate a new directive called SamplingDirective, call:

$ ng generate pipe sampling
CREATE src/app/sampling.directive.spec.ts (236 bytes)
CREATE src/app/sampling.directive.ts (147 bytes)
UPDATE src/app/app.module.ts (781 bytes)

The schematic will use the same prefix as the Angular project to name the directive. For example, if your project has the default prefix set to “app”, this directive should be named [appSampling]. You can manually set this by passing the --prefix argument into the CLI.

Moving Forward

These are only a few schematics that the Angular CLI offers. You can list all the available schematics by typing in

$ ng generate --help

Furthermore, you can also get detailed information for each schematic by passing in --help after ng generate [schematic]

Angular schematics are awesome tools to help streamline your Angular development.

Happy coding!

Resources

• Angular Schematics documentation