What Are Angular Modules? Complete Beginner Guide with Example

Angular Modules

In Angular, modules help you organize your code and keep your application clean and scalable.
Think of a module as a container that groups together related

Components

Services

Directives

Other modules

This makes your code easier to manage, especially as your app grows larger.

What Is @NgModule ?

To define a module in Angular, we use a special decorator called @NgModule.

Example: basic module

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

In this example

We import NgModule and other modules needed by our app.

We define the main module AppModule using @NgModule.

Structure of @NgModule

Inside @NgModule, there are four common properties:

1. declarations

List all the components, directives, and pipes that belong to this module.
These are parts of your UI.

Example:

declarations: [AppComponent, FormComponentComponent]

2. imports

Include other modules your app depends on (like forms or HTTP support).

Example:

imports: [BrowserModule, FormsModule, ReactiveFormsModule]

3. providers

List the services your app needs to use, so Angular knows where to find them.

Example: if you have a data service

providers: [DataService]

4. bootstrap

Tell Angular which component to load first when the app starts.
Usually, this is your main AppComponent.

Example:

bootstrap: [AppComponent]

Why Use Modules ?

Keep your project organized

Reuse parts of your app easily

Divide your app into logical sections

Improve maintainability and scalability