Tutorial

Using Angular CLI Schematics

Published on October 10, 2019
Default avatar

By Chris Engelsma

Using Angular CLI Schematics

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

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.

app.module.ts
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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chris Engelsma

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel