NgModule ਕੀ ਹੈ?

Question

NgModule ਕੀ ਹੈ?

Accepted Answer

ਇੱਕ **NgModule** ਇੱਕ ਕਲਾਸ ਹੈ ਜਿਸ ਨੂੰ `@NgModule` ਨਾਲ ਸਜਾਇਆ ਗਿਆ ਹੈ ਜੋ ਸੰਬੰਧਿਤ ਕੰਪੋਨੈਂਟਸ, ਡਾਇਰੈਕਟਿਵਸ, ਪਾਈਪਸ ਅਤੇ ਸੇਵਾਵਾਂ ਨੂੰ ਇੱਕ ਸਮੰਵਿਤ ਬਲਾਕ ਵਿੱਚ ਗਰੁੱਪ ਕਰਦਾ ਹੈ, Angular ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਕੰਪਾਇਲ ਕਰਨਾ ਹੈ ਅਤੇ ਇਕੱਠਾ ਜੋੜਨਾ ਹੈ। (ਨੋਟ: ਆਧੁਨਿਕ Angular NgModules ਤੁਲਨਾ ਵਿੱਚ **standalone components** ਨੂੰ ਹੋਰ ਵੱਧ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ, ਪਰ NgModules ਨੂੰ ਸਮਝਣਾ ਅਜੇ ਵੀ ਬਹੁਤ ਸਾਰੇ ਮੌਜੂਦਾ 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
```

ਇੱਕ ਕੰਪੋਨੈਂਟ ਸਿਰਫ **ਇੱਕ** ਮੋਡਿਊਲ ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਉਸ ਮੋਡਿਊਲ ਦੇ templates ਵਿੱਚ ਵਰਤਣਯੋਗ ਹੋਣ ਲਈ ਘੋਸ਼ਿਤ (ਜਾ ਸਟੈਂਡਅਲੋਨ ਦੇ ਤੌਰ ਤੇ ਪ੍ਰਾਪਤ) ਹੋਣਾ ਲਾਜ਼ਮੀ ਹੈ।

## ਮੂਲ ਮੋਡਿਊਲ

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

ਹਰ (non-standalone) app ਕੋਲ ਸ਼ੁਰੂਆਤੀ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਮ ਲਈ ਇੱਕ `bootstrap` array ਦੇ ਨਾਲ ਇੱਕ ਮੂਲ `AppModule` ਹੁੰਦਾ ਹੈ।

## ਫਿਚਰ ਮੋਡਿਊਲਸ ਅਤੇ ਸੰਗਠਨ

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

Apps ਨੂੰ **feature modules** (ਪ੍ਰਤੀ domain area ਇੱਕ) ਅਤੇ ਇੱਕ **shared module** (ਸਾਮਾਨ ਕੰਪੋਨੈਂਟਸ/pipes) ਵਿੱਚ ਸੰਗਠਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, codebase ਨੂੰ ਮਾਡਿਊਲਰ ਰੱਖਦਾ ਹੈ ਅਤੇ ਹਰ ਫਿਚਰ ਲਈ lazy loading ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦਾ ਹੈ।

## Standalone ਨਵੀਲੇ ਟਰੈਂਡ

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

ਆਧੁਨਿਕ Angular ਕੰਪੋਨੈਂਟਸ ਨੂੰ **standalone** ਹੋਣ ਦਿੰਦਾ ਹੈ — ਆਪਣੀ dependencies ਨੂੰ ਸਿੱਧਾ ਘੋਸ਼ਿਤ ਕਰਦੇ ਹਨ — NgModule boilerplate ਨੂੰ ਘਟਾ ਰਿਹਾ ਹੈ ਜਾ ਖਤਮ ਕਰ ਰਿਹਾ ਹੈ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰਖਦਾ ਹੈ

NgModules Angular ਦਾ ਰਵਾਇਤੀ ਸੰਗਠਨ ਅਤੇ dependency-wiring ਮਕੈਨਿਜ਼ਮ ਹੈ — `declarations`/`imports`/`exports`/`providers` ਨੂੰ ਸਮਝਣਾ ਬਹੁਤ ਸਾਰੇ ਮੌਜੂਦਾ Angular apps ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਅਤੇ lazy loading ਨੂੰ ਸਮਝਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।

ਭਾਵੇਂ ਨਵਾ ਕੋਡ standalone components ਵਵੱਲ ਝੁਕਦਾ ਹੈ, NgModule ਗਿਆਨ ਅਸਲ-ਸੰਸਾਰ Angular ਕੰਮ ਲਈ ਲਾਜ਼ਮੀ ਰਹਿੰਦਾ ਹੈ।