Your first @angular/schematics

The Angular team did it again 😍😍!!

https://mashable.com/2017/07/13/cult-of-the-party-parrot-slack-reddit-meme/#PBb.P.tmUSqV

🤠 Angular Schematics it’s a new amazing function for the devs!!

Angular labs :)

But… What is @angular schematics?

Schematics — An Introduction

This article it’s a little introduction by🧐 Hans🧐

Okey, sound good 🤓… .

But, I’m a Angular 🧙Gandalf🧙 Developer, Why I need create a file into my “Angular project”?

I can think of a lot of possibilities…

When you work team is big (or not🤷‍), you need a guide lines for your code, and not ever you better option is “ng g c my-component” or “ng g s my-service” etc etc etc …

When you create a library you can add a “stories” like a Angular CLI style https://github.com/angular/angular-cli/wiki/stories

When your team use ngrx or other library for manager states (or other type of library) you need create a LOT of files with the same format

AND Angular Schematics is your solution

It’s code time

At this moment you need have install the angular/schematics

how??

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

Okey it’s time to create your first schematics :)

schematics blank --name=my-first-schema

In this moment you have a little schematics for create a simple file 😜

at this moment we will teleport to another developer site 😯

hands on the keyboard

It’s time to write a magic code…

The first file you need change is the collection.json

src/collection.json

$schema => is the url to the definition for the collection-schema.

schematics => Is the options for your schematics 😎 .

my-first-schema => Is the schematics cli name :).

aliases => the alias.

factory => is the url for your folder code ( when you write, the schematic ).

Description => a simple description.

Schema => the url to options for your schema.

With this changes you have the configuration for your collection.

src/my-first-schema/schema.json

In this file you have a options for your schema … it’s like the “ — change-detection”

ng g c component-name --change-detection

In this options you can add the type, default value, description, alias…

After create the json with the options you need create the interface for this…

/src/my-first-schema/schema.ts

It’s index time

The first and more important:

If you have plugins in your text editor it is possible that you get a lot of errors, the style of not finding any import or some specific function.

this file is the one that creates the

Classify is for a little magic in the templates for the schematics.

filterTemplates is a filter for use or add more files.

option.path it’s very important you use this option for create the folders and files in the angular app.

templateSource use the cli options and “build” the files into “./files” for create you final template (with the cli options changes)

src/my-first-schema/index.ts

It’s Angular time 🎉🎊

It’s time to write angular code (or like angular code), into the files folder, have all files for your final template…

src/my-first-schema/files/

The first file is the component (my-first-schema.component.ts), in this file you have your angular functionality …

BUT, when you see the code have a strange tags… like PHP/ASP/other SSR languages…

<%= classify(name) %>

This is strange… If you review the post a bit, let us know that we were going to teleport.

When write the options, one of this is the “name” and is a string…

The classify function is write the value of each options.

Classify have the power for read the options 🤨… If you do not believe me, you only need wait a little minutes more…

src/my-first-schema/files/my-first-schema.component.ts

HTML time 👨‍💻

src/my-first-schema/files/my-first-schema.component.html

A little difference is the “tag” for use … You don’t use the equals (if you use the equals, the app never build 👮‍)… In this case I use the value (boolean), if you write in the cli “ — service” this value is true, if not the value for default is false.

<% if (service) %>

Console time 🕵

Yeah, you need build this project (it’s in typescript), after this you need “build” your schematics… and create a new project for test your schematics 🧙‍

Only for test

copy all file (except node_modules & package-lock.json) into your angular cli project to test-schematics/node_modules/mfs ( the mfs is the config in src/collection.json file ).

I guess you know what time it is…

YES, it’s time to implement you schematics to the project…

ng g my-first-schema mfs — service — name=”Mfs” — collection mfs

Okey, its alive, but the template work 🤔??

Let’s do a quick review:
- we install schematics
- we create a project
- we modify the configuration to support certain options
- modify the index to generate a set of files that were inside the files folder
- inside the files folder we created a “template” of what would be a component in angular
- within that template we use classify to decide what to show inside the html and the component
- We made a build of everything
- we create an application in angular with the cli
- add to the node_modules the schematics (only for test, you have to make a link or upload it)
- we execute the schematics command and we pass options
- it all worked, you’re already ‍‍a Gandalf of the schematics ‍

Code: https://github.com/jorgeucano/my-first-schematics-es

To write this article, learn a lot from the following articles:

Schematics — An Introduction

Generating Custom Code with the Angular CLI and Schematics

After more than 9 years working in the tech industry, Jorge is a full stack developer with focus on JavaScript technologies. Today, Jorge is working at ByteDefault using Angular / RxJS / Firebase / Nativescript as well as other technologies. He delivered several courses and talks as well as write some tech articles on these subjects. Because of that, he was recognised as a Google Developer Expert in Angular & web technologies and Nativescript Developer Expert.

Before leaving, I leave all the places for which it is possible to see what I’m doing, or just to be greeted =).

Jorge Cano (@jorgeucano) | Twitter

Jorge Cano

I’m write other article in english for angular:

The importance of upgrading your Angular Web Apps

Thanks for read 👌

JC