Angular Schematics using Nx Workspace

developing web applications sometimes difficult enough but with angular we have the angular CLI that helps us to generate code for our workspace projects services components classes etc so why not generate code yourself you can take advantage of the angular schematics and NX to actually create your own schematics or your own code generator to generate your own code let's get started [Music] okay what we're gonna do today is something that I've been interested in doing for almost a year now and just haven't really got through it but you know have some extra time to be at home recently so what I'm doing is gonna just create this video and just kind of walk you through this workspace schematic is different from just a normal schematic because we don't have to build or package this schematic in order to use it so we eliminate a lot of the steps involved in developing schematics so where do we start and how do we begin well one of the first things we want to make sure is we have the right packages available that allows us to be allows us to basically create schematic so one of the things we want to do is we want to install the schematic CLI from angular def kit as well as schematics and core so we'll install those three packages I've already done that so all you need to do is run yarn or NPM and add add those packages basically and you want to do a dash dash dev to make sure that they're put in your dev dependencies and the last one that we want is the app schematics angular package and this one is an important one because it contains some utilities and some other things that are very useful in developing our schematic projects so once we have those packages we're ready to go and really I'm making an assumption here that you're familiar with NX if you're not familiar with NX workspace it's basically just a kind of an add-on or sits right on top of the angular workspace and just gives us some additional capabilities we know that it is very opinionated in some ways in terms of like where do we put our apps it's in the apps folder where we put libs in the libs folder so when we're talking about schematics where do we put schematics probably in the schematics folder right and you're probably wondering where that is if you look in an NX workspace under tools there is a schematics folder so where we're getting there right we have what we need to basically start creating schematics one one thing that you could do though just to make sure that you have installed everything properly is after you still installed the schematic CLI you can run this schematic stash - help and you should see help yes right and one of the options that we have is to list available schematics so we can actually start playing around with schematics without even making our own right so all we need to do is use an existing normal so all right so let's let's get into it one of the things that we're going to do is basically create that and we're going to use normal workspace and we're targeting our workspace to come at ik for domain service now we're not generating that right we actually want to create a not a domain service but a domain library project right so we're going to rename that and so I'm just gonna do a dry run and hit enter which is really nice about dry run is or dash D for that is basically it'll show you what the result would have been without modifying the file system so when we're using C lies it's basically using schematics and so we're gonna create our own and we'll see why that's important later to be able to do dry runs when we're creating us so what we're gonna do is create a workspace schematic and there we go so it's named domain library it has two files that have been created a schema file and an index file right so let's take a look at those so we go to our tools schematics folder we have domain library folder now here's our two files we have a schema file and the schema file is basically defines what the options are for your schematic so in this case we have one property name and we know on other schematics that we use with the angular CLI that there are multiple options right so basically those options are defined as properties within the schema file and then our index file is a function that's really the entry point into our schematic that basically returns a rule because it could be called by something else and and maybe that would would continue to be used but the entry point here takes in that schema that we were just looking at and notice in our example here that it's actually not strongly typed but it's just basically an any write we can we can take care of that by that's just a terminal in to the specific folder and what we want to do is we're gonna use a dynamic and MPX command basically it's going to use this DTS generator package target our schema jason file output a schema type definition file so we'll go ahead and hit enter on that take a moment all its gonna do is basically output our file so now we have this file and it's an interface called domain library we can actually change that to export and it has our name name property that we want right and it's called the main library I'm gonna rename it the main library options good or index here it's not being used but we know it's being referenced oh we don't want that one hold on here so basically it's a highly Annette somewhere all right so now I broke its target in our schema file so we're good there so we basically can supply a name and basically it's gonna use the normal workspace schematic and it's an external schematic so this chain command here basically allows us to chain any number of rules together to output some kind of composition of what we want to do so we can basically use a whole set of schematics which all to return rules and such and take in the options that we just looked at so let's see if this works we're gonna just save everything we're not even gonna compile our application because we don't need to so what we want to do is target this domain library schematic and we already generated it so let me let me get our run command here so what we want to do is give it a name let's just call it new Lib one and we're gonna do a dry run so what we're doing we're gonna do a yarn run we're targeting the workspace schematic domain library that's the name of the schematic that we have over here right and then when we generate it we want to create a library called new Lib one ok and there is no project because we're actually creating a library so we'll just remove that dry run so what's gonna do this command is basically going to create a library project for us and if we didn't have the dry run flag on there basically all of these files would have been created and these three files on our workspace would be updated so TS config would get a new path entry for our new library angler Jason would get the all of the project information in there and annex Jason would have the name of the new project added to our workspace so it's working we didn't even compile it and we actually could create these files now for want it but we're not gonna do do that just yet because what we want to do this is going to be something where we're actually creating a new library and this library will have a module right and this library is also going to have a service that acts as an API so what we're doing here I'm using a an architecture where that's very layered and it has a nice separation of concerns between the UI the presentation layer and the business layer so what we have are a set of basically library projects that implement the business logic for our application domains the domain features right so if we have domains feature domains like orders shipments products customers each one of those would have a domain library and there's a lot of files involved and it takes time and it could be error-prone and I want a specific format of those files and architecture that I've been working with for quite a while now so it's it's well-defined its maintainable its consistence reliable so it's ready to become a schematic template so I can use it to just basically generate very domain libraries all day long with just my CLI so that's that's what we want to do here and that's kind of the intent of doing this so one of the things that we're going to do is basically modify our template here to create a module so the next thing we want to do is we want to do the external schematic again so we'll do that and what we're going to do is we're gonna give it the actual collection name of the schematic and then we want to create a module and the collection name that we're going to target here is the angular schematics right and we have one more thing that we need to pass in right we need to pass in our options and the options are basically we want our name right so we know that it's part of our or did we rename that yet no we still call it schema so let's rename that to options and then options that name is there and if we want to make sure there's a project there and we don't think we have that but we can add it options up project right and it's a complaint it's like it doesn't belong there it doesn't want to add it that's declare it and so if we go there it's declared we'd probably want to put it under our name right so it's working in this manner here of our options interface and what we're gonna do is our project schemas and add those so in that resources for this the video here will actually show you where to find those and then you can create your own or look at these example of schematics that have all the different properties here for the options that we're gonna use so we have a project option right and we're gonna need that so if we go back to our domain library here now it now that'll be there right Oh what else do we need here if we're going to create this domain library so one of the things I want - I'll run it without it just to show you what's going to happen here and then we'll save these so we're gonna run our yarn command to call this schematic from the collection that we're working with it creates this domain library it's running now the specified project does not exist oh because we didn't add it to our options right so that's thing about these schematics is they basically use what you pass in create a new one there we go and what we're gonna do is we already have the name and and we know the name is going to be new Lib one right now if we pass that in it'll be there but say you really didn't really want to put that there because it doesn't belong there and then you have to what if they type it in wrong and such it's just not gonna work right so I think a better option would be to basically use the name value for our project and we'll call - rise Options dot name right and what doesn't it like just doesn't like how it looks it's an odd name right so what we what we can do is we could save this and so what we're doing is we're kind of encapsulating some of the options here for our schematic and the only thing that we need to really pass in currently is the name which is kind of cool makes a lot easier right because you don't have to dash your eyes on a command line I'm gonna run that and it's not going to complain anymore because we are supplying the project to the module schematic which is required because it needs to know where to put that module all right good so what we have here is there's our module and we notice it put it in a folder called new Lib one if we wanted to just put it in the root of the library the other thing we could do is just add some more options here so flat true save that if we run it again it's gonna create the same files but it's gonna they're gonna be located differently all right so our module is now in the root ok so currently our schematic is doing pretty well and we haven't really written a lot of code to do this we're basically taking advantage of calling other schematics using an external schematic method to do that in passing then the options and really the only thing we have is the name right so we're good so the last thing we want to do is to create a service command again this one is going to be customized and so we're gonna use a different item here we're gonna use schematic and it wants a name right and it's gonna want some options and some of the options we can't we can do this so we could say the name is going to be - your eyes that options name right and same with the project right kind of same from above if you don't like the type you can just copy and paste which works for me flat is true and we're not going to need tests for this one a reason for it's basically a lot of pass-through code for the service but we'll have tests in our templates right so we don't have a schematic template yet so right now we have a domain library and what we want to create as a domain service so I'm gonna name it domain service alright this schematic doesn't exist so if we try to run it it's probably gonna say hey this there's no schematic named domain service in this collection yep the main service wasn't found in the collection we knew that so what are we're gonna what we're going to do is actually create our domain service so basically we used NX generate and we're using our collection of workspace schematics and we're gonna create a domain service and remember it's just gonna create an index file and a schema file just give me a JSON file alright there we are so we have our two files so really we kind of have our set up for for this so what I did what I've done is I basically went to the angular schematic for a service and kind of looked at that that code very flattering lis I basically just copied it to my schematic service right so I can just do what's good here so I'll show you what I did so basically the code in the angular project basically had a utility folder that had all of the utilities required for example to parse the name which is used right here if we want to create the default path that's used there if we want to apply lint fix it's right here so what's going on is we can actually take advantage of the package at schematics angular and in the utility folder of that package we have these corresponding utilities available for us so we're good there and there is no domain service options schema yet right so we can kind of do the same and what I'm gonna do is just copy and paste again and we'll change that ID so it's a domain service right and the one thing that we didn't do is what we want to do is strongly type that so let's go ahead and terminal there and we just want our MPX command to our DTS generator hit enter it's all about tools right all right I want to rename this to domain service options good of our index we got the main service options it knows where to find all this stuff so we're good our options are named options so we're passing those all the way through and really that this template isn't too complex what it's doing basically it's in the same format it's a entry function returns a rule it has the the tree that represents the file system and basically what we're doing is trying to determine what the path is so that it can parse that path create the actual parse path and then if we're doing skip test we're going to exclude the files that end in template or spec test template and then we're going to apply these templates and we're going to pass in some string utilities and all the options so it has all those options and you probably could do that earlier with the DA options and then add the new ones and in the previous index files so we can go back and do that if we want to clean up that code a bit and then what it's going to do it's going to return the merge of the previous changes with these new changes based on the templates so one of the things that it's doing is it's looking at a folder called files which we don't see yet and by convention most schematic developers are using the files folder to contain the templates that they want to use so remember schematics really 80 to 90 percent of time or even more schematics are creating things they're creating code for your projects for your modules for your for the applications that we're working with and so what what code is generated is really based on templates and the information we pass in based on the options and what I can derive from that it basically we'll use that against the template in an output like a component a spec file for that component a service aspect file for the service etc etc so we basically have all these template files well in the environment where I'm working I would create my library with a module add a service add a folder add a business service that's injectable that implements the business logic and then I have business actions I have a repository class that handles all the API calls and such there's a spec test class for that as well a file for that and there's some base files for the action and a base file for the business provider etc etc a lot of files and if you had to remember how that all worked and what files you needed while you're creating the domain service you might miss something to forget something so once you have something well defined in your architecture its maintainable it's consistent it's reliable it works its functional you've exercised it in your applications it's tested you know it works you can use that those files or those items as a start for templates right and that way then you could basically generate instead of creating those templates one-off for your your implementation so what I'm gonna do is I'm going to target the domain service folder and all I'm gonna do is I'm just gonna paste in a files folder and then we'll walk through these templates and kind of give you an idea what's going on remember one of the options is flat if something is flat it's not gonna create a folder for it so it's not gonna create a folder for the for the name the option name if flat is false if it is true then it will create that and what it's going to do is it's going to use the - karai's utility function with the name and create a - Erised name that you passed in and then it's going to put the contents in there so in this case we have a service file it's basically a service class using the name we pass it on our options and another utility called classify and that's probably coming from the strings utilities that we passed in there and then the rest of this stuff is just boilerplate template right and then I pass in this so we see a little error here so what we need to do is just add in the actual name here and I wanted a classify name so that'll fix that template and do we see any other things need to test so what we're doing is this syntax here that works with the options that you pass in and the utilities is kind of a razor syntax so there's probably a different name for it the globally but basically it's percent equals with the brackets that allows us to encapsulate that that interpolation what's going to happen there so that's all we need to do so we can have hello world or we can have an actual class with everything with its injectable decorator and then all of its imports etc right and then even a test file for that specific service in by that same name right so it's looking pretty good so that's what that looks like and if you notice you want to add the name of the file the syntax is underscore underscore prefixed and stuff fixed and then use the variable name at the utility name so name at - sure eyes and what I'll do is it'll - tries that name value there for those files right so now we have other files who have a business folder and we have basically a business service template and notice all the templates and then dot template by convention so they know their templates and if your filename has a specific name that you want to use from your options you have to use the underscore underscore name - arise and then basically I have a repository service which basically is making the HTTP calls for the application and then what calls that are the business actions so the business action template implements the actual business logic we have a rule engine that we run validation rules data validation rules business rules for everything's good we we call it API service and it returns the results we would uncomment that and the API service is this repository service that belongs to the to the business provider so this all works we know what works so all we need to do now is generate and see if our new template files actually create all of what we need here yarn run the main library new Lib one right and if we recall we don't need to pass in the project information anymore because we're actually - arising that within the template so all right or then the function so here we go we're gonna just run this and so we're just gonna do now is create our library project it's going to add a module to the library project and then it's going to create the service which it did and then it's going to create all of our business files from our templates and then our to action files in the action folder in those templates so it created all these files for us so we have a library and we have a new library with the module and a service and all these implementations for interacting to our web api s-- and such and less than 10 seconds that's pretty cool so really that is really the power of schematics in the creation schematics because they can scaffold code very quickly for you so once you have the point where you can actually define what your templates are gonna be you just put them in the files folder you fix them up with the pre except Fisk's if you want to name them - why's that name and then you're just updating the internals using utilities to basically classify or - arise a name inside the actual templates and then the rest is just your boilerplate code around and in your template specific to how you want to build your application so did we do a oh we actually ran this without a dry run so really now if we go to our lips folder we should have a new library with all this code and it's ready to go right should be ready to go we should should be able to build it so I don't know let's do ng build SS project equals every time you try to do stuff like this in a tutorial or demo it's not gonna work the first time yeah here we go it doesn't support the build target oh yeah so this is a the new template for libraries from the angular workspace or an X workspace they're not publishable so they're just source for other libraries and other application projects so if we really wanted to we can actually take a look at that real quick it's kind of interesting so if we're looking our projects let's write at the bottom here it is now it's a library project and we're gonna look into architect node but there's no build configuration so that's why it's not there so if we wanted to build it the only reason why you would want to build a library is if you're going to publish it and then you want to use ng packager so you're gonna use the build ng packager setup and then you could do it that way so but by default when you're in a narwhal NX workspace you really don't have to build your libraries and you don't have to build your schematics so just re-emphasize that point it eliminates that workflow for you and allows you to be more efficient and more effective by folk seen on development of features and working code and then we don't have to kind of fill with building deploying and at consuming libraries or trying to build and appoint consume schematics which would be even much more different so we see now that our schematics really become like another tool the schematics are like a great tool a tool in the tool belt here in your angular workspace the NX workspace and we have lots of capability so we can actually just recap here we have a domain library we're using existing schematic collections from Narwhal to create a library call an external schematic we used one from the angular schematics to create a module and then we called a custom one that we added to our schematics collection here and that's the one that we detailed out with all these files right that's pretty cool and all we do is just just call it by schematic and it passes in the options here so that's it basically one entry point file for building a domain library and now all you need to do is basically use the refactoring tools from your UI services to the domain service and you can build out all of the the functions or operations that you need to detail each of these domain services [Music] you you

Channel: Angular Architecture with Matt Vaughn

Views: 766

Keywords: angular, schematics, workspace, typescript, matt vaughn, AngularArchitecture.com, Nrwl.io, nx.dev, angular schematics, angular cli, angular architecture, visual studio code, code generation

Id: w1IfWQ2robw

Length: 33min 3sec (1983 seconds)

Published: Sat Apr 11 2020