Module

In Angular, Modules are the way to group different parts of application together, parts like components, directives, pipes and services which are related to each other. Modules group these parts in such a way that they can be combined with other modules.

To define a module, we use NgModule decorator. If you go to CLI generated project and view the app/app.module.ts file, then you can see it has a module defined.

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    // Import other components here.
  ],
  imports: [
    BrowserModule,
    // Other Modules import here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here the App class is converted into module by use of NgModule decorator. This decorator requires three properties:

• imports
• declarations
• bootstrap

Import is an array of modules that the application uses. This array contains other modules which application can use.

Declarations are the array of components, directives, pipes that are defined in our application module. Whenever we create any component via CLI, that component is automatically added here in this array.

Bootstrap requires array of components that are used to bootstrap the application. In most cases it has only our root component. Only in some special circumstances more than one component is used to bootstrap the application.

There are two types of modules:

• Root module
• Feature module

An application can have only one root modules. It can have many feature modules or zero feature modules. Now Angular needs to identify the root module to work properly. An easy way to find out the root module is that root module will have BrowserModule imported in it’s @NgModule import property. While Feature modules import CommonModule. Like here you can see AppModule is importing the browser module.

Browser module provides basic built-in directives, services and pipes like *ngFor, *ngIf etc..