 Hello, my name is Matt Rabel and this is a screencast showing you how to use angular schematics to simplify your life First of all you should know that it's not actually called angular schematics, but just schematics It comes from the angular project however, so that's why it often gets tagged with angular as a prefix so this is based on a blog post that you see here and It has a github repo that shows the completed exercise that we're going to be doing today This demo dot adoc is a list of steps that I will be using to show you this screencast and So to begin I'm just going to install angular CLI which I already actually have installed So I can do ng Version and you can see I'm using 732 So I can create a new angular project using ng new My cool app and you can pass in like routing and it'll turn that on if you don't do that It'll actually prompt you would you like to add your angular routing? I'll say yes, and then I'll just use CSS for the style sheet format So you can see that took about 30 seconds to create Schematics was actually used under the covers to create this project. So there's another schematic That's kind of cool. If you see the end of my cool app you can use ng add octa dev schematics And I'll actually prompt you for octa things to Configure your application to authenticate with octa by things. I mean configuration. So while that's going we can create a new application with octa If you don't have an account you can go to developer dot octa comm and create one and I can go to applications and add one and I'll do single-page app Click next and then we'll just call this angular spa and You'll want to change the URIs to be 4200 because that's a default port that angular CLI runs on and Then you can click done And so then if you look under API authorization servers, you can get your OADC apps issuer URI from right here That was under API authorization servers and Then if you go back to your applications that you just created you'll have the client ID right there for you and So you'll see it added octa angular as a dependency. That's our octa's angular SDK Installed those packages and created a couple new files. So now if we do ng serve We can open our browser to 4200 and You'll notice it switched from login to log out So we're already logged in because we're logged in in here. So if we click sign out here refresh our app You'll notice we're still logged in But if we click log out, then I'll log us out and then if we click log in again We can sign in and a redirects us back to our app and shows a logout button So that shows that you have authentication working in an angular app in just a couple minutes Now let's create our own schematics. So Angular dev kit schematics is the dependency that you'll need. I already have that installed So you'll run schematics to create a blank project So CD back out of there and do schematics Blank and specify the name We'll just use my component That'll create a new schematics project for us. Now if we CD into there Can open it up an intelligent and if we look at the project Under the source directory is where it gets interesting. There's a collection.json Which defines your schematics? So this is just a blank schematic and it points to this index That TS file which gets compiled to JavaScript and you'll see all it has is my component and it returns a tree So the tree is the notion of basically a virtual file system that you can manipulate and do all kinds of things with create files modify files and Then return it back and it'll make those modifications to an angular project. There's also a test in here We all like tests. So this merely says hey run that schematic Particularly this one and make sure there's no files that are created. So that's the basics of it And you can see if you run mpm test See where we are here Mpm test everything should pass because we aren't creating anything. So let's make it a little more interesting Let's go into the index dot TS file And let's go ahead and create a just hello dot TS. So we'll use tree dot create specify the name of the file and Then specify what we want in it. So I'm gonna use console log Hello world and now if I run my test It'll fail right because it's creating a file and It expects it to be there. So if we switch back to our test We can go ahead and modify that And say there's going to be a file that's created and it's going to be called hello dot TS Now if we run it Everything passes All right You can also run it using schematics Dot for current directory or current project My component You'll see it creates it, but then if you do an LS you see it's not actually there So you have to turn off debug mode dry dash run equals false and then it'll create the file and then if you try to run it again You'll see it fails because the file already exists. So you need to account for that in your actual project Let's make this a bit more interesting and let's use some templates So you might create a schematic that copies in templates to a project That's what we do with the octa dev schematics project. It creates some configuration It creates a landing page and so on. So to do this, I'm going to create a directory first of all Make their dash P that'll only work on Linux or Mac OS distributions If you use in Windows, you might have to create all these directories by hand. So my component files source app and then in The app directory, I'm going to create an app component TS so this will override the default app component TS that's generated by Angular CLI and Then that I'm going to just have a simple one So by default Angular CLI generates an app component that has title equals X and this I'm going to change that variable to name and you'll notice there's some warnings here about hey You know cannot find module angular core. That's because we're not actually compiling these templates in our project We want to compile them in the destination project So you can ignore any template errors at this point We'll create another file in here an HTML file to read it app.component.html And we'll just say hello name and then we'll include that router outlet in there The next thing you'll want to do is create a schema.json that you can put prompts in So you see here's one that I created in my component schema and it just prompts for a name So once it has that name as a property then it can substitute it into those templates So you might be wondering how did I generate that code so fast if you look up at the top here? You'll see that I have IntelliJ live templates that I'm using so I pre-recorded some code snippets And this allows me to play them back if you would like to use them yourself for your project or your demo This repo shows you how you can import them and use them in your IntelliJ instance So the other thing once you create that Schema.json is you need to go and add it to your collection definition So this will be my component Schema.json so now it knows about it knows to prompt for those values and We need to install Schematics-angular since we're going to use those in a test to actually generate a project and then run the schematic against it So MPM install put it as a dev dependency Schematics-angular and then you'll modify index.ts To do a couple things first of all we want to set up The project's path So you see we set up a few options there We get a workspace which is provided by that Schematics-angular project and then we can get a project from that and then we can basically get the path That we're going to put the files into and now we want to call that here So set up options pass in the tree pass in the options and then we can delete this line and Then we're gonna want to write some code to actually move the templates from this schematic into the Angular CLI project So we've got a bunch of imports you can see most of them are in that devkit schematics project and this is the API that you can use to basically do all this work and Do it with only about you know 35 lines of code So we set up the options and then we basically get the path We're going to move things to we get the source of where our files are and then we specify those templates And we pass in the option so it has that name and it can use that and then we move them And then we merge it with the template source. We override everything and it all should work So now we need to update the test I'm just gonna update the whole thing And we'll walk through it So this is still describing the my component This is how you set up a path to your collections and the schematic runner schematic test runner from Angular devkit and Then these are workspace options app options and Actual scheme options. So these are things that would normally be set by Angular CLI But since we're using them in a test, they're not quite set up So before each we're gonna run schematics Angular and create a workspace and Then we'll go ahead and pass that app tree into schematics Angular and create an application So this is what Angular CLI does for you And then once we have that going we can create a new schematics test runner down here and run my component as The schematic and you'll see we're running it async and then we're converting it to a promise and then we're reading from the tree So we're reading that app component that TS was created and we're expecting it to contain that name So if we've done anything wrong, it'll contain title instead and this will fail So we can run an MPM test See if it actually worked So it does work. We're actually copying those files We're seeing them in there and we're able to read their contents So now the thing I like to do is test with an actual CLI project So we'll go ahead and run ng new we'll call this one my test app since we already created my cool app and We'll specify routing and we'll specify style and So you can do this with your schematic as well If you have a name property that you can do dash dash name specify the value and all that will work So it created a new project for us now. We can go into that my test app And you can use MPM link to link back to your schematic so my component and Then I'll install that in the project and you can use it so we could do ng g my component And then the name of the schematic you want to run. I'll just say my name And you'll see it says hey these files already exist even though we said to overwrite them so to fix that you can add this for each that basically loops through each file and Overwrites it if it exists. So even though we're saying overwrite. It's not quite working So there's an issue here. You can track that you might not have to do that in the future So now we can go back to our schematic my component Make sure we saved it and then MPM run build Go back to our project my test app and Run the same command again, and you'll notice this time it actually overwrites those files So it does update them if we were to do a get diff You could see that it says, you know different things. So pretty cool, huh? one thing I do want to tell you is if you were to go to MP my my component and actually publish this module that's equivalent to an MPM pack and So it creates you see that tgz file, and then if we go back to our Project my test app and you install it that way right my component and My component targz This is actually a better representation of what happens after you publish it to MPM Because you'll see a bit of a difference if I were just to run My component my component It only actually overwrites one file instead of two the reason for that is because by default MPM ignores all Dot TS files and since our templates are dot TS files. It won't actually publish that so very important to remove that And I have that in the tutorial as well as in these steps here Because it was a big problem for me It took me several hours to figure that out and it was such a small change You should know if you do publish you can unpublish within 72 hours So don't be afraid to publish and try it out that way and then unpublish if you made a mistake The other thing I want to show you is you can actually add in this collection dot JSON the ability to actually instead of do NGG or run it with a schematic command line You can do NG add and then you'd only have to have the first part of your schematics name So in here we can do schematics and you add and You'll see it has a different factory same description or you know Whatever you want to put in there and then it points to the same schema So it'll still prompt you for a name and then we can create a new schematic basically and we'll call this one and G add and Put an index dot TS and this is very simple You can see it just exports a default function looks very similar to when we had nothing, but it calls our schematic So it's basically providing a shortcut to get to your schematic. The other thing is in here. You can actually add aliases So you can make it very simple instead of typing my component and just type M I'm not going to do that But the cool thing is now you can go back to your schematics project run MPM run build It didn't like it Are you gonna do MPM install for some reason? I did have this issue before and now if I run MPM build It works fine and then if I go back to I can do MPM pack Then we'll go back to my test app and we'll do MPM install And we'll point to my component And that target easy file And then we can do NG add my Component so a little bit easier a little bit of a nicer shortcut And there you are. So that's the gist of my tutorial here You can find all the source code with everything that we did today on github You can find me on Twitter at mRabel you can find my team at octa dev and You can go to developer dot octa dot com to create a free account today Lastly, I would invite you to follow us on YouTube we have a YouTube channel lots of videos lots of screencasts like this one And I think you'll enjoy it a fair amount so scroll through have some fun and have a great day