Angular Schematics

How to leverage

to empower Developers of Enterprise

Frontend Apps & Libraries

@tomastrajan

by

Text

TOMAS TRAJAN

SOFTWARE ENGINEER, BLOGGER, SPEAKER, TRAINER... 

@tomastrajan

🔗 medium.com/@tomastrajan

Medium

Enhanced Stats

goo.gl/Szv3hU 

BLOGGER

@tomastrajan

🔗 github.com/tomastrajan

✅ best practices

✅ Angular Material components

✅ NgRx state management

✅ theming support

✅ 30+ contributors

✅ unit / e2e testing

OSS DEVELOPER

1500+

@tomastrajan

@releasebutler

MAKER OF

@tomastrajan

SPEAKER & Co-ORGANIZER

@tomastrajan

@tomastrajan

WHAT ARE WE GOING TO LEARN?

@tomastrajan

WHAT ARE ANGULAR  SCHEMATICS ?

@tomastrajan

BENEFITS OF USING  SCHEMATICS

HOW DO WE USE SCHEMATICS ?

@tomastrajan

HOW TO CREATE CUSTOM SCHEMATICS

@tomastrajan

HOW TO USE CUSTOM SCHEMATICS WITH ANGULAR CLI

@tomastrajan

HOW ARE WE GOING TO LEARN

IT ?

@tomastrajan

@tomastrajan

 LIVE CODING !

 IS NOT DEAD...

@tomastrajan

WHAT DID WE LEARN ?

@tomastrajan

  • ng new (workspace)
  • ng generate (apps, libs, ...)
  • how to use 3rd party schematics
  • potential use cases for custom schematics
  • how to specify defaults
  • how to execute Angular CLI just for specific project in the workspace

@tomastrajan

Angular CLI

  • using schematics cli
  • generate schematics project
  • how to run custom schematics
  • schematics concepts ( Rule, Tree, Options, ...)
  • implement simple schematics
  • use templates
  • use schematics options

@tomastrajan

CUSTOM SCHEMATICS

  • how to make custom schematics work in Angular CLI workspace (workspace / path setup)
  • how to use x-prompt for options
  • create crud-resource schematics
  • conditional templates

@tomastrajan

CUSTOM SCHEMATICS EXAMPLE

  • create schematics in Angular CLI lib project
  • setup schematics build (tsconfig, copy assets)
  • implement ng-add schematics
  • implement schematics to generate lib entities in project

@tomastrajan

CUSTOM SCHEMATICS IN LIB

@tomastrajan

RESOURCES

@tomastrajan

GET IN TOUCH

npx tomastrajan

@tomastrajan

 

ANGULAR WORKSHOPS

www.tomastrajan.com

@tomastrajan

 THANK YOU FOR YOUR ATTENTION!

FOLLOW ME

@tomastrajan

GET IN TOUCH

PERSONAL

MEETUP

 

Angular Schematics

By Tomáš Trajan

Angular Schematics

In development, we often want to extract reusable parts of logic into self contained libraries. Modern tooling provided by Angular CLI enables us to provide amazing developer experience for the users of our libraries. Libraries can be added seamlessly, while automating all the necessary setup work. Providing built-in library specific schematics enables us to cut on the learning curve that is needed to get developers productive with our new shiny lib!

  • 2,857