Angular 16 NgModule Tutorial with Example

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
  ]

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]
})

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

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

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