DEV Community

Anubhab Mukherjee for This is Angular

Posted on

Understanding Angular Modules

Today we will understand one of the very important topic in Angular - Angular Modules.

In simple term a module is a logical block or container that holds something.

If we need to describe module in terms of Angular we can say its a logical block containing components,
custom directives, custom pipes and services (I will talk in detail very soon).

Once you create a new Angular project the Angular team provided you with a ready to use module called app.module.ts. Lets see the different parts of Angular Module -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Now few key take away -
1️⃣ A module is a simple typescript class.

2️⃣ The module is decorated with @NgModule decorator.

3️⃣ The NgModule decorator is a function that takes an object. This object is also called metadata object (you should remember this term)

4️⃣ The metadata has information/ details which helps Angular how to compile and launch the application.

In the above example you can see only 4 options but in total there are 9 options available. So lets see each one of them and their use (few are advanced options which will be taken in details later).

declarations -
It is an Array of classes.
Holds list of all the custom directives, pipes and components user has created.
All the items (directive, pipe, component) you added in this list are all part of this module.
Note --- A Very Important One
You Can add a component/ directive/ pipe class in only one module's declaration array. If you try to add in more than one place you will get a compile error.

imports -
It is a list of all modules that this current module is dependent on.
In the above example you can see BrowserModule added. It means the current module is dependent on the BrowserModule to function correctly.

providers
It contains the list of dependency injection providers. (Might be a bit hard to digest at this time so in easy term I can say list of services. I will revisit this part when we talk about services)

exports -
List of custom components, directives, pipes that the module exposes/ exports so that the other module can use it.
Now try to relate with import... This module will be exporting and some other module will be importing. So the other module should write the name of this module in that module's import array. Easy right???

entryComponents -
It is a list of components that should be compiled when this module is defined.
An Angular app always has at least one entry component, root component- AppComponent by default.
We will learn about dynamic components later. All dynamic components need to be part of EntryComponent list.

bootstrap
List of components that are bootstrapped/ during the start and the listed components will be automatically added to entryComponents.

schemas -
List of elements and properties that are neither Angular components or directives (again will talk about it later. It will be discussed in Advanced topic part).

id
The Id used to identify the modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.

jit -
When this is present, the module will be ignored by the AOT compiler. (Again will be covered in the advanced part)

The main use of module comes to logically group similar items and put all the related items together.

Suppose you have a feature like dashboard. All the related components will be placed under that module.

Hope you enjoyed reading the post.
Coming up next is Creating custom module in Angular.

If you enjoyed reading the post please do like comment subscribe
and share with your friends.

Cheers!!!
Happy Coding

Discussion (5)

Collapse
jwp profile image
John Peters

I find NgModules very confusing and even conflicting with the newer Javascript module system. I read on Github they are considering removing this in future releases. Have you heard any more about this?

Collapse
anubhab5 profile image
Anubhab Mukherjee Author

Hello John,
A very good point you have pointed out. Thanks a lot for bringing this up.
The NgModule concept will not be removed. Discussions are going on to make it optional.
That is also not finalized.
The use of Angular modules are mostly to organize the application.
There are various use case of angular modules.
Where as ES6 modules are used to import and export items, resolve the same name issues.
Hope I could clarify the doubt.

Collapse
sumitsood3127 profile image
sumeet sood

As mentioned in the blog ,where can we find link of next blogs?

Collapse
anubhab5 profile image
Anubhab Mukherjee Author

Hello Sumeet
Here you can find the next blog to read
dev.to/this-is-angular/creating-cu...
:)

Collapse
anubhab5 profile image
Anubhab Mukherjee Author

Thanks Sumeet.
Today I will be posting the next blog. I will update in this comment.