Creating Custom Module in Angular
Tags: angular, beginners, typescript, modules
Published: 2022-01-13 13:11:30

Today we will learn how to create our own Angular Module. If you are not aware of Angular Modules I would recommend you to go through this [post](https://dev.to/this-is-angular/understanding-angular-modules-41pb)

---

In order to create a module we will be using the below CLI command 
`ng generate module <module_name>`
or the shorthand
`ng g m <module_name>`

Lets open a command prompt from the project root and type in the below code -
`ng g m payroll`

In the command prompt you will see like below -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oobmrhdu34gri8bk3jiu.PNG)
Lets see how the project looks like -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58b2jzo1fzoqofvne2ln.PNG)
So here we can see a folder with the module name has been created and a file called `payroll.module.ts` file has been created.

Lets open the file and see -
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class PayrollModule { }
```
Here in the above code we can see the similar structure as we saw in the module provided by Angular the `app.module.ts` file.
One more thing you have noticed the declaration array is empty as we dont have any component/ pipe/ directive associated with this module yet. If we want to put any of the component/ pipe/ directive inside this directive we need to add in this list.

Lets see how to do that. For that lets open the prompt again (from the project root folder) and type in the CLI command to create a [component](https://dev.to/anubhab5/creating-angular-component-129e).

Lets run the below command: `ng g c PayrollDashboard`

But wait ✋🏻, you might ask a question if I run the above command in which module my component will get added???
In the above case still the new component will be added to the `app.module`. 
To specify the module also we need to add some extra flag to the above 👆🏻 CLI command.

`ng g component PayrollDashboard 
--module=payroll/payroll.module.ts`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn8ob8keh4b2w8qpf28.PNG)
Here you can see that the very similar output we saw earlier when creating [custom component](https://dev.to/anubhab5/creating-angular-component-129e), But one minor difference is there the last line where you can see the **UPDATE** has happened to the 
`payroll.module.ts` file and **not** app.module.ts

Now if you open the payroll.module.ts file you will see that the declarations array has been added with the newly created component.
But still you might not be so happy as the component has been created outside the payroll folder (marked with yellow arrow)-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rqh6b7w4pdwpuh55bwi.PNG)
If you see closely the payroll-dashboard was created outside the payroll folder. But I need all the payroll features under the payroll folder itself right?
For that we need to do a minor tweak in the earlier CLI command used to create the component -
`ng g component payroll/PayrollDashboard --module=payroll/payroll.module.ts`

If you see we just added the folder name before the Component name while creating the component. Cool right!!!

So we added the Component. 
But how to use? 
Is it the same thing like earlier?  
Take the component selector and add it in `app.component.html` file like below?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcgl7yf7co9r5ka34inr.PNG)
The answer is NO!!!
2 more steps (I say VERY IMPORTANT steps you need to take care of)

1️⃣ Since the payroll.component is part of a separate module (payroll module) you need to **import** the payroll module in the module where you will be using (app.module). 
In this case we will be using the payroll.component (present in payroll module) inside `app.component.html` file, which is present inside the `app.module.ts`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajd64ftfvbju8955frvb.PNG)
See how we added the newly created module? 
In the imports array we added the name of the payroll.module. We discussed [earlier](https://dev.to/this-is-angular/understanding-angular-modules-41pb) right?

2️⃣ Just adding the module is not enough. We need to add the component (we are using outside) in the exports array of the module where it has been declared.
So in our case, we need to add the name of the component to the `exports` array of the `payroll.module`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jpstotk7r49nma3hyln.PNG)

That's it...
If you open the browser you must see the below output -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ax3i85ahfn6k4v3hsvu.PNG)

Hope you enjoyed the post.
Coming up next the different types of modules we can have in Angular. Stay tuned!!!
If you liked the post please do like share and comment.

I will be [tweeting](https://twitter.com/Anubhab_0905) more on `Angular` `JavaScript` `TypeScript` `CSS`
So hope to see you there too 😃

**Cheers**!!!
_Happy Coding_