Angular Schematics: Integrating With Other Schematics
Once you have an amazing Schematic put together you will likely want to use it everywhere. Or, even easier for you, you might find other Schematics you want to integrate into your Schematic so that you get all your Schematic can do even more things.
Helpful Hint: Keep your Schematics as small and modular as possible for maximum portability. You don’t really need one Schematic to rule them all.
In this article, we are going to look at two different ways to interact with other Schematics. The first is integrating with other Schematics that already are part of your collection.json. The second is how to interact with Schematics that are outside of your collection.json.
Integrating With Internal Schematics
Integrating with other Schematics within your collection.json file is really simple and also really easy to mess up. You might find yourself stuck in a not-intuitive variable hell if you aren’t careful. In this section let’s look at how to quickly use an internal Schematic and then some best practices of how to not get in trouble.
The code to call another Schematic is really simple. You can see an example below and in the file here.
Here, based on some options, I either run the vo Schematic or I don’t. I also make sure to pass any necessary variables to the vo Schematic. This is where you can get yourself in trouble. Below are two alternatives.
The first way creates an object and passes the data directly into the Schematic. This might sound straightforward enough, however, if the values change at all during the template chaining process your values will remain whatever they are at the beginning of the process. In your case, this might not be an issue. However, in my case where I was asynchronously making updates to values, this ended up very badly for me. Be a good code steward, don’t do this with your code.
Instead, do the second. You’ll see that the values of the voOptions are created outside of the template chain process. Thanks to how Javascript passes variables this enables the values to change as the chaining process continues and the value that is passed into your Schematic is the value when the Schematic is actually called. Do this with your code.
If you want to see an example of this code in action, checkout ngMomentum’s codebase to see it in action. You can see a link directly to where it is put to use below.
In the next section, we will look at how to interact with Schematics that are outside of our collection.json file.
Integrating With External Schematics
Within ngMomentum we give users the ability to scaffold their application using a few different UI Frameworks. This way we know the project is set up correctly from the beginning and can support the UI Framework of their choosing. The three current options are: Material Design, Twitter Bootstrap, and No Framework which is just vanilla HTML. What is great is, if you select to use Material Design, then ngMomentum goes ahead and calls the Material Schematic. Setting up your application just how the Material Schematic expects.
To call an external schematic you need to call the Schematic Collection by name, specify which Schematic within the collection you will run, and finally pass any necessary variables to that Schematic. You can see one of these calls below and at this link.
To find these variables I went to look at the Material Schematic collection.json. I bolded below where I found the name of the Schematic within collection.json.
The name of the Schematic is obvious from the command line call to include the Schematic.
$ ng add @angular/materialAnd finally, to get find the variables necessary for the Schematic, go to the schema.json file.
I bet you thought it would be harder right? Including another Schematic is super simple. You can see a full/working example at the link below.
Conclusion
Including other Schematics just builds on the power of your own Schematics. I would recommend not including another Schematic if it isn’t really necessary. But in the case it is necessary, it is super helpful and easy to do.
Other Posts In This Series
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.
