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 { }

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