Angular Module: NgModule

NgModule is a core building block of the Angular framework. Modules are a great way to organize an application and extend it with capabilities from external libraries. Angular apps are also modular in nature. Each app must have a root module, which is an AppModule in any Angular app.

This AppModule exists in app.module.ts file of your Angular app. In short, this is the entry point of bootstrapping an angular app. Besides AppModule, there are other NgModules, such as FormsModule, HttpClientModule, and RouterModule.

An NgModule is defined by a class decorated with @[NgModule](https://angular.io/api/core/NgModule)(). Furthermore, the @[NgModule](https://angular.io/api/core/NgModule)() decorator is a function that takes a singl_e metada_ta object, whose properties describe the module.

NgModule Metadata

@NgModule identifies the module’s own components, directive, and pipes. In addition to this, you can import other modules in your app, and export yours to other modules. Lastly, you can add services to the providers, so that app components can use it.

So, @NgModule metadata has the following properties. Let’s have a look at these properties one by one.

• imports –– you can import other modules here required by your app.
• providers –– you can add all your services in providers, which can be globally accessible across your app.
• declarations –– declare your components, directives, pipes of your app.
• exports –– you can export your module by adding them here.
• bootstrap –– here we inject the main root component, which is AppComponent, to bootstrap the app.

For instance, let’s take a look at below code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

Types of NgModules

• Routes –– particularly used for managing routes. You can not use it for anything else.
• Service –– this only contains services/providers.
• Feature –– contains custom features. Especially used for lazy loading of modules.
• Shared –– contains shared features used by multiple modules/components.

How to create module with Angular CLI

You can create any module using below command.

1

ng generate module <module-name>

Commonly used modules in Angular app

Let’s have a look at commonly used modules in any angular app.

BrowserModule

Import BrowserModule from@angular/platform-browser and it is used for running your app in browser.

CommonModule

Import CommonModule from @angular/common and it is used for NgIf and NgFor directives.

FormsModule

Import FormsModule from @angular/forms and it is used for building templates driven forms.

ReactiveFormsModule

Import ReactiveFormsModule from @angular/forms and it is used for building reactive forms.

RouterModule

Import RouterModule from @angular/router and it is used for app routing.

HttpClientModule

Import HttpClientModule from @angular/common/http and it is used for server interactions.

Read More

Create Your Blog Site With Gatsby.js Static Site Generator

Sharing Files Anonymously Online Via OnionShare

Array.Prototype.Flat() or ES2019 Array Flat() function