NgModules
NgModule (@NgModule decorator) related components/directives/pipes/services ko ek COHESIVE unit mein organize karta hai. declarations = is module ke components. imports = doosre modules jo chahiye (jaise FormsModule, BrowserModule). bootstrap = root component jisse app START hota hai.
Modern Angular (v17+) "standalone components" push karta hai — NgModules OPTIONAL ban gaye hain, components apne khud ke imports directly specify kar sakte hain. Lekin bahut existing/legacy Angular code NgModules use karta hai, samajhna zaroori hai.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GreetingComponent } from './greeting.component';
@NgModule({
declarations: [AppComponent, GreetingComponent], // is module ke components
imports: [BrowserModule, FormsModule], // doosre modules jo chahiye
bootstrap: [AppComponent] // app yaha se start hota hai
})
export class AppModule { }- @NgModule = related components/services ko organize karta hai
- declarations/imports/bootstrap = module ki key properties
- Modern Angular (17+) standalone components prefer karta hai, NgModules optional
Bade applications mein sab kuch EK module mein rakhना (AppModule) unmanageable ho jaata hai — "feature modules" se related functionality (jaise UserModule, AdminModule) ko alag, self-contained modules mein organize karte hain.
// user.module.ts:
@NgModule({
declarations: [UserListComponent, UserDetailComponent],
imports: [CommonModule, RouterModule.forChild(userRoutes)]
})
export class UserModule { }
// app.module.ts mein import:
// imports: [UserModule, AdminModule, ...]SharedModule ek pattern hai — common components/directives/pipes jo MULTIPLE feature modules use karte hain, unhe ek jagah define karके, sab modules import kar lete hain — code duplication avoid karta hai.
// shared.module.ts:
@NgModule({
declarations: [ButtonComponent, LoadingSpinnerComponent],
exports: [ButtonComponent, LoadingSpinnerComponent] // EXPORT zaroori hai!
})
export class SharedModule { }