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.
The first thing we need to do is install the Angular CLI.
Once that’s done, we can create a new project by running
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:
To generate a component named DashboardComponent
, we use the component
schematic:
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
:
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:
and
will produce the same results.
We can create a service called SocketService by using the service
schematic:
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
:
Also note that this does not automatically add the service to your NgModule so you will need to add it yourself.
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:
Opening up the generated file will show that it implements the CanActivate
interface.
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:
Opening up app.module.ts
reveals that PhonePipe has been added to the module.
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:
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.
These are only a few schematics that the Angular CLI offers. You can list all the available schematics by typing in
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!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
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!