In Angular, what is NgModule? If you're seeking for a quick definition of the Angular 12 Module, we may state that NgModule is a decorator that groups all of your Angular application's services, pipelines, directives, and components.

Using the example of website development, we can say that a module will contain the footer, header, right section, centre section, and left section.

You can define a module with NgModule. When you use the Angular CLI command to create a new project, NgModule is generated by default in the app.module.ts file. And it looks like this:

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

As shown in the sample below, you must import NgModule.

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

Take a look at the structure of the NgModule 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 all starts with @NgModule. It also has an object with bootstrap, providers, imports, and declarations in it.

Declaration

A declaration is a collection of components in basic language. Whenever you use the Angular CLI to create a new component. By default, Angular CLI adds the newly generated component to the declarations array.

Declarations will include a reference to this component, as explained below.

  declarations: [
    AppComponent,
    NewComponent
  ]

Imports

The Imports array in an Angular application is a collection of modules that are required to run the application. We can further explain it using an example. The @NgModule Browser Module has already been imported, as you can see.

If the application requires reactive forms and router service, you can 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

If you wish to make your app's services globally available, declare custom services in the providers' array.

The following are the services that will be provided.

import { NgModule } from '@angular/core';
import { CartService } from './cart.service';
@NgModule({
  providers: [CartService],
})
export class UserModule {
}

Bootstrap

For the main app to start running, an angular Bootstrap array is necessary.

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

Visit angular.io to learn more about Angular and its features.

I hope you will like the content and it will help you to learn Angular 13 NgModule Tutorial with Example
If you like this content, do share.