The What and How of Angular Schematics: The Super Simple Version

A summary of Angular Schematics: the what, how and why. Here's the super simple version!

If you're an average Angular developer that hasn't quite reached power-user light level, then this article is for you! If you've heard of a three syllable word (schematics) but haven't figured out what it does or how it works, then this article is also for you! We are going to cover the basics of what schematics are and what you can do with them.

What Are Schematics Anyways?

If you've been around the Angular community for a hot minute, you've probably heard of Schematics. But what are they and, more importantly, what cool things can we use them for?

If you search for the term "Angular Schematics," you will inevitably find yourself at the Angular DevKit repo on GitHub:

Next step: understanding the relationship between the Angular CLI, Angular Schematics and this new player—the DevKit.

Well, the DevKit is simply a set of libraries to “manage, develop, deploy and analyze your code” and currently just contains the CLI and Schematics. That is all well and dandy, but how does the CLI fit into this story?

The CLI peeps created Schematics to be a more “powerful and generic” way to support the CLI scaffolding. You can read about the four reasons why in the article, Schematics — An Introduction by Hans Larsen.

Schematics

So, we know why Schematics were created and what the CLI team is using them for, but how about for us? I like how Tomas Trajan put it though, he said Schematics are a “recipe” for generating and modifying files in your project. You call this recipe with this command: ng generate <schematic-name>.

Schematics Collection

If you've heard about Schematics, you might have also heard about Collections. A Schematics Collection is simply a project that has at least one schematic in it.

Schematic Collections are usually just that, a collection of named Schematics that people publish and allow others to then install. The Angular team maintains the official @schematics/angular collection, which contains Schematics like component, module and application. But normal users like you and I can take advantage of Schematics and make them available for use to the WORLD!

What Are Some Useful Things You Can Do with Angular Schematics?

Understanding the definition of Schematics is only part of understanding what they really are. To fully understand, you also have to know what you can do with Schematics. This next section covers a small list of what you can do with Schematics, although it might be easier to ask “What can't you do?” than to answer “What can you do?”.

Nx by Nrwl

You can use Schematics to create a library of services. A perfect example of this is the company Nrwl. They created Nx, which is a collection of Schematics and helper services that structure an Angular CLI project to enable building at scale and with multiple teams and apps.

If you'd like to give Nx a try, use ng add @nrwl/schematics to add the Nx goodies to your project and configure the Angular CLI space to be in the Nx format. From there, you can use the Schematics that Nx provides to add apps, libraries and other common pattern stuff (like ngrx, etc.).

Nx also has several binaries (they are command line scripts, like what ng itself is) that can be run in the command line to do things like only test apps affected by code changed in a commit, generate a data visualization diagram of your app and libs, format and lint code across your workspace, etc. — Justin Schwartzenberger

With Schematics, a very common use is to enable build commands for your library or service (like ng add and ng update). You can also generate project skeletons with the environment configured to be already setup with the latest, no need to spend hours combing through outdated docs! Lastly, as Gianna Ciaramello put it, “Schematics can also be used to easily introduce and enforce project wide conventions.”

Create Your Own Schematic!

If you would like to give Schematics a shot, you just need to follow these three simple steps to get going! First, using node 6.9 or higher, install the Schematic command line tool:

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

Now that we have the command line tool installed, we have access to this nifty executable that will create a blank schematic project:

schematics blank --name=my-awesome-component

We can see the component created in our project:

Use Case: How We're Using Schematics for Kendo UI

To give another example of a cool company is using Schematics to benefit users, you have to look no further than this very website! Kendo UI uses Angular Schematics to ensure that ng add works properly for all of our packages. Like we mention here, this goes through all of the proper steps to ensure that you're off to the races with our components once you ng add any of them to your project.

We also have dependencies on other Kendo UI for Angular packages. Using Schematics, it simplifies adding in our references in to the app module, and it also simplifies using our themes with angular.json configuration. All of these are points where someone could come in and try Kendo UI for Angular, run into configuration issues and then give up. But with Schematics, we can ensure that people have a good getting-started experience. Schematics also help us ensure that projects are set up the right way. 😊

All around, Schematics are a pretty powerful tool that this girl thinks are currently under-used in our Angular industry. I think as more and more people try them out, the more popular they will become. We here on the Kendo UI team sure love them!