Types of Angular Module
Tags: angular, beginners, typescript, modules
Published: 2022-01-14 17:44:35

Today we will understand about the different types of modules you can have in an application. If you are not aware of Angular Modules then I would suggest you to go through this  [post](https://dev.to/this-is-angular/understanding-angular-modules-41pb). Also you need to know how to create your own module. For that you can have a look at this [post](https://dev.to/this-is-angular/creating-custom-module-in-angular-4p66).

📣 **Note**
This will be more of theory where we will understand the requirement of different types of modules. It can be different puzzle pieces for you as of now. But in coming posts I will cover all the module type with example. And then you will be able to see the puzzle completed. 

---

Before diving deep first lets understand why we need various types of modules. (By the way one of the module type we already saw in the earlier [post](https://dev.to/this-is-angular/creating-custom-module-in-angular-4p66)). 
As your application grows in size you need to break/ group the application into various chunks for -

`maintainability`, 
`enhance the performance`, 
`scalability`, 
`easy deployment`, 
`enhance the development process`.

To meet the above requirement `module` can be a key player (best friend).

There are **six** (6) types of modules an application can have (depending on the requirement. Not necessary an application should have all the six)

1️⃣ Root Module (🔴 Mandatory 🔴)
2️⃣ Feature Module (🟡 Optional 🟡)
3️⃣ Routing Module ( 🟡 Optional 🟡)
4️⃣ Service Module (🟡 Optional 🟡)
5️⃣ Widget Module (🟡 Optional 🟡)
6️⃣ Shared Module (🟡 Optional 🟡)

1️⃣ **Root Module**
I bet you have already seen a glimpse of this module.
When you create an Angular application for the first time you are provided with a module `app.module.ts` remember???
This is the root module (you can think this as the parent, all other modules will be directly or indirectly part of this module.
Only **one** root module is allowed in an application.

2️⃣ **Feature Module**
In a large application (say an eCommerce application like amazon) with multiple different features you need to break the application into smaller chunks depending on the features (like users, product, payment etc.)
These smaller chunks can be grouped under modules known as the Feature module.
As an analogy you can think like you have a parent folder called entertainment under that you have different subcategory or folders like music, movies, games, photos etc. This subfolders you can think as feature module. All related items are grouped under one module.

3️⃣ **Routing Module**
When an application has the navigation feature (more than one screen to display) then the routing module comes into play. In this scenario the Routing module is **required**. 
If you are interested to know more about routing module you can have a look at this [post](https://dev.to/anubhab5/setting-up-angular-routing-from-scratch-1i07).

4️⃣ **Service Module** - (I will talk in detail very soon)
Modules that contain only services (can be utility services).
The service module must be present only at the **root module** .
Once I talk about services this part would be more clearer to you.

5️⃣ **Widget Module**
The third party UI component library module which exposes components/ pipes/ directives (in the export array) can be considered as widget module.
For example you have built a table component and you want to share it with other teams in your org. The module which contains the table component can be considered as a widget module.
The other team would be importing your module and use the table.

6️⃣ **Shared Module**
The commonly used components/ directives/ pipes which are used across the application in different modules are put in a special module called the `shared module`.
Now consider you have made a table component. This table component need to be used in different screens of <u>your</u> application across different modules. The only way you can do is by using the _Shared Module_.

---

Hope you enjoyed reading the post (only theory but this knowledge will be helpful in the coming days. Trust Me)

If you liked it please do _like_ _share_ and _comment_.

Coming up next _Communication between components_.
So stay tuned.

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_