Total Guide To Custom Angular Schematics

Tomas Trajan
20 min readMar 26, 2019
Original 📷 by Sveta Fedarava

Schematics are great! They enable us to achieve more in shorter amount of time! But most importantly, we can think less about mundane stuff which leaves our limited attention span to focus on solving real challenges!

Check out video from Angular Meetup Zurich with live coding of custom schematics!

☕☕☕☕☕ 20 minutes read

⚠️ This is a pretty long article which gets into every detail of implementing custom Angular schematics…

This article will teach you how to create tailor made schematics specific to the needs of your project or organization! It will empower you and your colleagues to become much more productive!

Feel free to skip straight to the part dealing with the specific topic you are interested in. That way you can fill in the blanks in your pre-existing Angular schematics knowledge!

What are we going to learn?

  1. Create custom schematics project workspace
  2. Concepts that describe schematics implementation (Factory, Rule, Tree…)
  3. Build schematics (and setup watch build for convenience)
  4. Run schematics (package vs relative path, debug mode, …)
  5. Implement simple schematics (generate a file, …)
  6. Parametrize schematics with schema and options
  7. Use advanced schematics templates (and string helper functions)
  8. Integrate custom schematics in Angular CLI worksapce
  9. Test custom schematics
  10. Build and publish custom schematics package
  11. Implement schematics as a part of Angular library project
  12. Add ng-add support
  13. Add ng-update support

Preparation

Before we start, we have to install @angular-devkit/schematics-cli package to be able to to use schematics command in our terminal. This command is similar to well-known ng generate but the main advantage is that we can run it anywhere because it’s completely independent from the…

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer