Apakah itu NgModule?

Question

Accepted Answer

Sebuah **NgModule** ialah kelas yang dihias dengan `@NgModule` yang mengumpulkan komponen, directive, pipe, dan service yang berkaitan ke dalam satu blok yang padu, memberitahu Angular cara mengompil dan menyambungkannya bersama-sama. (Nota: Angular moden semakin gemar menggunakan **standalone component** berbanding NgModule, tetapi memahami NgModule masih penting untuk kebanyakan codebase sedia ada.)

## Anatomi sesuatu 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 {}
```

## Empat array utama

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

Satu komponen hanya boleh diisytihar dalam **satu** module sahaja, dan mesti diisytihar (atau diimport sebagai standalone) untuk boleh digunakan dalam templat module tersebut.

## Module akar (root)

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

Setiap aplikasi (bukan standalone) mempunyai `AppModule` akar dengan array `bootstrap` yang menamakan komponen permulaan.

## Feature module dan organisasi

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

Aplikasi disusun ke dalam **feature module** (satu untuk setiap kawasan domain) dan **shared module** (komponen/pipe sepunya), memastikan codebase kekal bersifat modular dan membolehkan lazy loading bagi setiap feature.

## Peralihan kepada standalone

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

Angular moden membenarkan komponen menjadi **standalone** — mengisytiharkan dependency mereka sendiri secara langsung — mengurangkan atau menghapuskan boilerplate NgModule.

## Mengapa ia penting

NgModule ialah mekanisme penyusunan dan penyambungan dependency tradisional Angular — memahami `declarations`/`imports`/`exports`/`providers` adalah perlu untuk menyusuri majoriti besar aplikasi Angular sedia ada dan untuk memahami lazy loading.

Walaupun kod baharu cenderung ke arah standalone component, pengetahuan tentang NgModule kekal penting untuk kerja Angular dalam dunia sebenar.