Angular Modules

• Angular modules are an integral part of an Angular application. 
• In the simplest terms, a module is a container for a specific set of related components, directives, services, and other code that helps organize and manage your Angular application. 
• Think of it as a way to group and structure your code for better maintainability and scalability.

To define a module we use @NgModule as follows:

Example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FormComponentComponent } from './form-component/form-component.component';


@NgModule({
  declarations: [
    AppComponent,
    FormComponentComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

At the above NgModule needs to be imported as follows:

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

Structure of NgModule:

1. declarations: It is an array of components where the reference of all components within the application is included by importing them first.
2. imports: It is the array of modules where all the modules required by the application are included by importing them at the top.
3. providers: Here all the services that are created are included.
4. bootstrap: This includes the main component of the application.