Blue Ball Machine — Image Credit: YTMND.com

Angular Schematics: Asynchronous Schematics

Jonathan Campos
Atlas

--

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.

--

--

Jonathan Campos
Atlas
Writer for

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