NgModule भनेको के हो?

Question

Accepted Answer

एक **NgModule** भनेको `@NgModule` डेकोरेटरले सजाइएको क्लास हो जसले सम्बन्धित कम्पोनेन्टहरु, डाइरेक्टिभहरु, पाइपहरु र सेवाहरुलाई एक समन्वित ब्लकमा समूहीकृत गर्छ, Angular लाई कसरी तिनीहरुलाई कम्पाइल गर्ने र एकसाथ जोड्ने भनेर बताउँछ। (नोट: आधुनिक Angular ले NgModules भन्दा **standalone components** लाई बढी प्राथमिकता दिन्छ, तर NgModules बुझ्न अझै पनि अधिकांश अवस्थित कोडबेसहरुको लागि आवश्यक छ।)

## 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
```

एक कम्पोनेन्ट केवल **एक** मोड्युलमा घोषणा गरिन सक्छ, र त्यस मोड्युलको टेम्प्लेटमा प्रयोग गर्न सक्षम हुन घोषणा गरिनु पर्छ (वा standalone को रूपमा आयात गरिनु पर्छ)।

## मूल मोड्युल

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

प्रत्येक (non-standalone) अ्यापलिकेशनको एक root `AppModule` हुन्छ जसमा सुरुवात हुने कम्पोनेन्टको नाम गरिएको `bootstrap` array हुन्छ।

## फिचर मोड्युलहरु र संगठन

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

अ्यापलिकेशनहरु **feature modules** (प्रत्येक डोमेन क्षेत्रको लागि एक) र एक **shared module** (साधारण कम्पोनेन्टहरु/पाइपहरु) मा संगठित हुन्छन्, कोडबेसलाई मडुलर राख्छन् र प्रत्येक फिचरको लागि lazy loading सक्षम गर्छन्।

## Standalone को ओर स्थानान्तरण

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

आधुनिक Angular ले कम्पोनेन्टहरुलाई **standalone** हुन दिन्छ — आफ्नो निर्भरताहरु सीधै घोषणा गरेर — NgModule boilerplate लाई कम वा समाप्त गर्छ।

## यो किन महत्त्वपूर्ण छ

NgModules Angular को परम्परागत संगठन र निर्भरता-wiring संयन्त्र हो — `declarations`/`imports`/`exports`/`providers` बुझ्न अधिकांश अवस्थित Angular अ्यापहरु नेभिगेट गर्न र lazy loading बुझ्न आवश्यक छ।

नयाँ कोड standalone कम्पोनेन्टको ओर प्रवृत्ति छ भए पनि, NgModule ज्ञान वास्तविक-विश्व Angular कामको लागि आवश्यक रहन्छ।