Thursday, 22 February, 2018 UTC


Summary

  • From official initiatives like being able to ng update your project dependencies and ng generate stuff like components or pipes, through semi official (ex Angular team) stuff like nx with schematics for generating services for popular ngrx state management library to small custom one-off schematics which are starting to pop…
  • What we will learnwhat are schematics and collectionshow to create new schematics collectionsimplest way to implement new custom schematichow to test our new schematic with real local Angular CLI projecthow to publish our new custom schematics collection to npmhow to use our new customs schematics collection in other projectsLetâ€s do this!What does…
  • Letâ€s look closer into what these terms mean before we dive deeper… – schematics collection — ( or just collection as used in this article ) is a project ( npm package ) which contains at least one schematicschematic — is a “recipeâ€� which can be executed by using ng generate schematic-name to generate…
  • Luckily there is a simpler way… – We can just copy and adjust default Angular schematics to get useful results right now and learn more advanced APIs later when neededIn previous step we have generated skeleton of a new collection project which contains couple of example schematics to help us get…
  • The first thing we have to do is to have a look in collection.json file which contains definition of all implemented schematics and make some adjustments… – Remove all schematics generated by default and replace them with our new custom service schematicsThen we can copy content of the original Angular…
Learn how to create, publish and use your own custom Angular Schematics to increase your productivity and enhance developer experience with step by step guide and examples from practice!
@lab5com: How To Create Your First Custom Angular Schematics With Ease? >> by @tomastrajan
I got very excited when Angular CLI team announced that they are working on Schematics.
Automatic generation and updating of a code base in organized well defined manner sounds like a lot less tedious work for the developersLots of stuff is possible with the help of schematics already. From official initiatives like being able to ng update your project dependencies and ng generate stuff like components or pipes, through semi official (ex Angular team) stuff like nx with schematics for generating services for popular ngrx state management library to small custom one-off schematics which are starting to pop up on npm.
Possible use-cases and benefits of Angular SchematicsSchematics have a huge advantage compared to more traditional approach to dealing with typing heavy tasks like using IDE templates or macros in that they are easily distributed and semantically versioned.
Schematics can also be used to easily introduce and enforce project wide conventions. This can in turn greatly reduce ramp up time for new developers joining ongoing projects.
Instead of trying to decipher outdated documentation they could just generate project specific stuff like entire app skeletons with environment specific configurations or whole feature skeletons with backend integrations and dummy screens.
Then they can focus on what really matters — implementing real features for the end users!
What we will learnwhat are schematics and collectionshow to create new schematics collectionsimplest way to implement new custom schematichow to test our new schematic with real local…
How To Create Your First Custom Angular Schematics With Ease