NgModule là gì?

Question

NgModule là gì?

Accepted Answer

Một **NgModule** là một class được trang trí bằng `@NgModule`, nhóm các component, directive, pipe và service liên quan thành một khối gắn kết, cho Angular biết cách biên dịch và kết nối chúng với nhau. (Lưu ý: Angular hiện đại ngày càng ưa chuộng **standalone component** thay vì NgModule, nhưng hiểu NgModule vẫn là điều thiết yếu cho hầu hết các codebase hiện có.)

## Giải phẫu một NgModule

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

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // component/directive/pipe mà module NÀY sở hữu
  imports: [CommonModule, FormsModule],                 // các module khác mà ta cần phần export của chúng
  exports: [UserListComponent],                          // những gì ta cung cấp cho các module import vào
  providers: [UserService],                              // service (DI) do module này cung cấp
})
export class UsersModule {}
```

## Bốn mảng quan trọng

```text
declarations → component, directive và pipe THUỘC VỀ module này
imports      → các NgModule khác mà module này cần các tính năng được export của chúng
exports      → tập con của declarations/modules được cung cấp cho các module import vào
providers    → service được đăng ký cho dependency injection
```

Một component chỉ có thể được khai báo trong **một** module, và phải được khai báo (hoặc import dưới dạng standalone) thì mới dùng được trong các template của module đó.

## Root module

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // component gốc để khởi chạy
})
export class AppModule {}
```

Mọi ứng dụng (không dùng standalone) đều có một root `AppModule` với mảng `bootstrap` chỉ định component khởi đầu.

## Feature module và cách tổ chức

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

Ứng dụng được tổ chức thành các **feature module** (mỗi cái cho một khu vực nghiệp vụ) và một **shared module** (các component/pipe dùng chung), giữ codebase mô-đun hóa và cho phép lazy loading theo từng feature.

## Sự chuyển dịch sang standalone

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // không cần NgModule
```

Angular hiện đại cho phép component là **standalone** — tự khai báo các phụ thuộc của mình trực tiếp — giảm hoặc loại bỏ phần boilerplate của NgModule.

## Tại sao điều này quan trọng

NgModule là cơ chế tổ chức và kết nối phụ thuộc truyền thống của Angular — hiểu `declarations`/`imports`/`exports`/`providers` là cần thiết để điều hướng phần lớn các ứng dụng Angular hiện có và để nắm được lazy loading.

Dù code mới có xu hướng dùng standalone component, kiến thức về NgModule vẫn thiết yếu cho công việc Angular thực tế.