Angular 14 Tutorial- NgModule Tutorial With Example

What is NgModule in Angular?

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

NgModule is a decorator that groups all our services, pipes, directives and components in an Angular app.

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

Using NgModule, we can define a module. NgModule is created by default in the app.module.ts file when we create a new project with the aid of the Angular CLI command and it appears as followed:

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

Then, we need to import NgModule as in the given example:

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

Here, we will 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

A declaration is a group of components. Whenever we 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 a part of declarations as given below:

declarations: [
    AppComponent,
    NewComponent
  ]

 

Imports

In an Angular app, an import array is a group of modules that is essential to the app. We can elaborate on it with an example. We can see that the @NgModule Browser Module has already been imported.

If a need arises for reactive forms and router service in the application, we may include the module as given 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

We have to declare custom services in the providers’ array if we want to make our services globally available concerning our 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 stating the execution of the main app:

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *