Learn Free Angular

Introduction to Angular 2 Module

Rawat Digamber /  Read Time: 2 minutes

Angular 2 Module

What is NgModule in Angular?

If you are looking for a simple definition for the Angular 2 Module, therefore we can say that NgModule is a decorator which groups all your services, pipes, directives, and components in an Angular application.

Citing the example of a website development, we can say that footer, header, right section, center section, and the left section will be grouped into a module.

Using NgModule, you can define a module. NgModule is created by default in the app.module.ts file when you create a new project with the aid of Angular CLI command. And it appears as follows –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';  // NgModule Angular service

import { AppComponent } from './app.component';
import { NewComponentComponent } from './new-component/new-component.component';

@NgModule({   // NgModule decorator groups services, components, pipes and directives
  declarations: [
    AppComponent,
    NewComponentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You need to import NgModule as in the below example.

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

Take a look at the NgModule structure below –

@NgModule({
  declarations: [ // Angular CLI registers components in the declarations array by default
    AppComponent,
    NewComponentComponent
  ],
  imports: [   // Register all the modules in the imports array
    BrowserModule
  ],
  providers: [],  // To make your service globally available register in the providers array
  bootstrap: [AppComponent]
})

It begins with @NgModule. And it possesses an object consisting of bootstrap, providers, imports, and declarations.

Declaration

In simple terms, a declaration is a group of components. Whenever you create a new component, with the help of Angular CLI. Angular CLI registers the newly created component in the declarations array by default.

A reference to this component will be part of declarations as explained below.

  declarations: [
    AppComponent,
    NewComponent
  ]

Imports

In Angular application, Imports array is a group of modules which is essential to the application. We can elaborate it with an example. You can see that in the @NgModule Browser Module has already been imported.

If a need arises for reactive forms and router service in the application, you may include the module as shown below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Providers

Declare custom services in the providers’ array if you want to make your services globally available concerning your app.

The services created will be included as given below.

import { NgModule } from '@angular/core';
import { CartService } from './cart.service';

@NgModule({
  providers: [CartService],
})
export class UserModule {
}

Bootstrap

An angular Bootstrap array is required for starting the execution of the main app.

@NgModule({
  declarations: [],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})

To know more about Angular and its feature please visit angular.io.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional design. I create digital products that make the user’s life easy using the latest programming languages and frameworks. e.g Angular 2+, Firebase Real-time Database, JavaScript, TypeScript, RxJS, Bootstrap, HTML5, CSS3, WordPress etc...