How to Create Module in Angular9?

What is NgModule in Angular?

If you are looking for a simple definition for the Angular Module, therefore we can say that NgModule is a decorator that groups all your services, pipes, directives, and components in an Angular application.

Citing the example of website development, we can say that the 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 the 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
  ]

Imports

In Angular application, Imports array is a group of modules which is essential to the application. We can elaborate it with an example. You can see that in the @NgModule Browser Module has already been imported.

If a need arises for reactive forms and router service in the application, you may 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

Declare custom services in the providers’ array if you want to make your services globally available concerning your 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 starting the execution of the main app.

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

To know more about Angular and its feature please visit angular.io.