Apa itu NgModule?

Question

Apa itu NgModule?

Accepted Answer

**NgModule** adalah sebuah kelas yang didekorasi dengan `@NgModule` yang mengelompokkan komponen terkait, direktif, pipe, dan layanan ke dalam blok kohesif, memberitahu Angular cara mengkompilasinya dan menghubungkannya bersama. (Catatan: Angular modern semakin memilih **komponen standalone** daripada NgModules, tetapi pemahaman tentang NgModules masih penting untuk sebagian besar basis kode yang ada.)

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

Sebuah komponen hanya dapat dideklarasikan dalam **satu** modul, dan harus dideklarasikan (atau diimpor sebagai standalone) untuk dapat digunakan dalam template modul tersebut.

## Modul root

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

Setiap aplikasi (non-standalone) memiliki `AppModule` root dengan array `bootstrap` yang menamai komponen awal.

## Modul fitur dan organisasi

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

Aplikasi diorganisir menjadi **modul fitur** (satu per area domain) dan **modul bersama** (komponen/pipe umum), menjaga basis kode tetap modular dan memungkinkan lazy loading per fitur.

## Pergeseran ke standalone

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

Angular modern memungkinkan komponen menjadi **standalone** — mendeklarasikan dependensi mereka sendiri secara langsung — mengurangi atau menghilangkan boilerplate NgModule.

## Mengapa ini penting

NgModules adalah mekanisme organisasi dan pengkabelan dependensi Angular yang tradisional — memahami `declarations`/`imports`/`exports`/`providers` diperlukan untuk menavigasi sebagian besar aplikasi Angular yang ada dan untuk memahami lazy loading.

Meskipun kode baru cenderung menuju komponen standalone, pengetahuan tentang NgModule tetap penting untuk pekerjaan Angular di dunia nyata.