Angular Module

By | | Updated : 2021-03-16 | Viewed : 4815 times

Angular Module

To organize a complex application in easy manner, we should make application as number of modules. So, we can easily enhance the application’s features. We can combine all similar functional code blocks such as services, components into one module. So entire code maintenance will be easy. Each module will be represented as unique module for specific purpose. In JavaScript, module means separate file. But in Angular, different files will be combined by NgModule as one module.

Every App will have one root module and many feature modules. Root module will be created during bootstrap.


NgModule is the JavaScript class, which contains the context of component’s compilation means Angular will compile component’s template. Here angular will take NgModule help to get all different code blocks. While rendering the template, component will be executed. Sometimes it may have some services as dependency. Then injector will be involved to get those instances. NgModule will have components, service providers, directives and pipes. And these all files will be consolidated as one functionality by NgModule. NgModule can use other functional classes like services to execute the business logic.

Please find the below given code snippet for NgModule.

Example for NgModule
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';
	imports: [ BrowserModule ], 
	providers: [ Logger ], 
	declarations: [ AppComponent ], 
	exports: [ AppComponent ], 
	bootstrap: [ AppComponent ] 
	}) export class AppModule {

Please find the NgModule configuration metadata as given below.

imports: Imports other modules. So the useful functionality from other module will be imported. Means while template rendering the required services, components and directives will be fetched from other module

providers: It lists the Service classes, which are provided by provider. These service classes will be injected into components whenever component required.

declaration: Contains the declarable classes which are related to current module. Components, directives and pipes are Declarable. We cannot declared other than declarable classes.

exports: it makes module classes as exportable. So these type of classes can be imported/visible in other modules.

bootstrap: To bootstrap the application we will configure the root component in the root NgModules.

Leave A Reply