Angular Schematics: Asynchronous Schematics

Jonathan Campos
Sep 18, 2018 · 3 min read

Full disclosure, this post completely could be an edge case that you may or may not ever need to think about when creating your own Angular Schematics. For a majority of Schematics, you’ll be generating your Schematic in a very synchronous fashion, able to trace the exact path from one function to another without any external dependencies or service calls.

But what happens when this isn’t the case?

In the case of ngMomentum, we wanted the ability to call out to a service and use the resulting data object response from the service to be used to generate the CRUD code necessary to interact with that endpoint. This includes modeling the value objects, forms, services, guards, everything. Everything is dependent on talking to that external source. In this case, we needed to create an asynchronous Schematic that would call to a service, wait for that service to respond, and then continue when we were ready.

This article is going to be short and focused on how to achieve this in your own Schematic by looking at the code that was created for ngMomentum.

Chaining With Observables

With Schematics you are primarily creating a list of rules to run one after the other to manipulate the application project tree.

Each rule returns the application project tree after it is complete and ready for the next rule in the series.

However, in the case of an Asynchronous Schematic, you can’t return the Tree. So, what can we do?

Once we went diving into the Schematic’s source code we found that a rule can return either a Tree or an Observable<Tree>. Yes! Now our options are opening up. This means that we can make a rule that can wait for the observable to be marked as completed.

Now we know we can wait for some operation to complete before continuing to our Schematic rules chain. This little revelation opened up the door to the feature we were hoping to achieve. In the end, it turned out nicely. You can see the full Schematic file here.

Conclusion

Angular Schematics really do give you a solid basis to build any sort of code generation you might need for your project. With this ability to also include asynchronous methods the sky is the limit!



Jonathan Campos is an avid developer and fan of learning new things. I believe that we should always keep learning and growing and failing. I am always a supporter of the development community and always willing to help. So if you have questions or comments on this story please ad them below. Connect with me on LinkedIn or Twitter and mention this story.

Rocket Fuel

Exploring the universe of connected devices to help brands discover new customer experiences.

Jonathan Campos

Written by

Excited developer and lover of pizza. CTO at Alto. Google Developer Expert.

Rocket Fuel

Exploring the universe of connected devices to help brands discover new customer experiences.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade