NgModule म्हणजे काय?

Question

Accepted Answer

An **NgModule** is a class decorated with `@NgModule` that groups related components, directives, pipes, and services into a cohesive block, telling Angular how to compile and wire them together. (Note: modern Angular increasingly favors **standalone components** over NgModules, but understanding NgModules is still essential for most existing codebases.)

## NgModule ची रचना

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## चार मुख्य arrays

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

A component can only be declared in **one** module, and must be declared (or imported as standalone) to be usable in that module's templates.

## root module

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Every (non-standalone) app has a root `AppModule` with a `bootstrap` array naming the starting component.

## Feature modules आणि organization

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Apps are organized into **feature modules** (one per domain area) and a **shared module** (common components/pipes), keeping the codebase modular and enabling lazy loading per feature.

## standalone कडे हालचाल

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Modern Angular lets components be **standalone** — declaring their own dependencies directly — reducing or eliminating NgModule boilerplate.

## महत्त्व

NgModules हा Angular चा पारंपरिक organizing आणि dependency-wiring mechanism आहे — `declarations`/`imports`/`exports`/`providers` समजून घेणे हे विद्यमान Angular apps च्या विशाल बहुसंख्यकांमध्ये नेव्हिगेट करण्यासाठी आवश्यक आहे आणि lazy loading समजून घेण्यासाठी आवश्यक आहे.

नवीन कोड standalone components च्या दिशेने वाढत असले तरी, NgModule ज्ञान वास्तविक-जगतातील Angular कामासाठी अत्यावश्यक राहते.