Types of Angular Module

#angular #beginners #typescript #modules

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. Also you need to know how to create your own module. For that you can have a look at this post.

📣 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).
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.

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 your 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 more on Angular JavaScript TypeScript CSS
So hope to see you there too 😃

Cheers!!!
Happy Coding