Create Angular Components with Stackjoy

In this post we’ll see how we can easily install common Angular generators and then generate code with them using Stackjoy. Stackjoy’s Angular generators are very similar to the Angular schematics that get bundled with the Angular CLI. However, Stackjoy’s generators are easily edited to suit your projects needs. As your Angular project takes shape, and component patterns emerge, you can edit Stackjoy’s generators to reflect your project’s uniqueness.

If you prefer a watching over reading you can watch the video instead:

Lets first install stackjoy with NPM.

npm install stackjoy -g

From here lets go to the root of our project’s codebase in a terminal. Once there, we’ll install the Angular generators by typing:

sj install ngx-generators

This will open the stackjoy app and present us with the newly installed Angular generators. We can confirm that we have our correct project codebase path which is shown in the header. If the codebase path is not correct you can always click on it to change it.

ngx-generators come with the following code generators:

• component: Create an Angular component
• component-single-file: Create an Angular component in a single file
• component-with-module: Create a component with module
• directive: Create an Angular directive
• guard: Create an Angular guard
• interceptor: Create an Angular interceptor
• module: Create an Angular module
• pipe: Create an Angular Pipe
• route: Create a lazy loaded Angular route
• service: Create an Angular service

For this example we’ll create a Lazy Loaded Angular route.

Selecting the route generator will take us to the generator view where the generator’s template files are located. The files are typical angular files with extensions you would expect for an angular project.

Here we can edit the files to customize them for our specific project needs if we need to. The left file-view shows us the editable template file while the right file-view shows what the generated code will look like.

You’ll notice that there are warnings next to the Inputs tab so lets go over there and fill out the necessary inputs that this generator needs. In this case it just needs a name for our new route. So we’ll give it a name: customers

Next we’ll head over to the Destination tab. Here we will select where we would like to place our generator’s files within our codebase.

Finally, lets head over to the Generate tab. Here we see all of the files that this generator will create and the destination paths of the new files. Once we are satisfied with our new files, and where they will end up in our codebase, we’ll Run the generator.

Once Stackjoy finishes generating we see the list of generated files along with some further instructions. Further Instructions can consist of useful next steps for the user, or it can consist of follow up code which can be used in conjunction with your newly generated code. In this case we’ll need one extra line of code to make the newly generated route work with our project. You can click on the line of code to automatically copy it.

If we head over to our codebase we’ll see the newly generated files. By adding the line we copied from the Further Instructions to the route’s parent routing file our new route will be ready to go.

const routes: Routes = [
  {
    path: '', component: ViewsComponent, children: [
      { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
      { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
    ]
  },
];

And finally, we can see our new route in our project:

The benefits of the stackjoy generators are that they are easy to edit and customize for your own project needs. Once you customize them, you can share them with your team. This allows you to standardize parts of your software development across your entire team. This example shows generators for angular projects but stackjoy is language agnostic so you can use stackjoy to create generators for any part of your development stack…frontend or backend.