Standalone component là gì?

Question

Accepted Answer

**Standalone component** (Angular 14+, mặc định trong các phiên bản mới hơn) cho phép một component khai báo **các phụ thuộc của riêng nó một cách trực tiếp**, mà không cần thuộc về một `NgModule`. Chúng giảm đáng kể boilerplate và giờ là cách được khuyến nghị để xây dựng ứng dụng Angular. ## Một standalone component ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← không cần NgModule imports: [CommonModule, RouterLink], // ← khai báo phụ thuộc Ở ĐÂY, trên component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` Component import đúng những gì template của nó dùng (`CommonModule` cho `*ngFor`, `RouterLink` cho liên kết) — các phụ thuộc của nó là tường minh và đặt cùng chỗ, thay vì được khai báo trong một NgModule riêng. ## Tương phản với NgModule ```text Cách dùng NgModule: Cách dùng standalone: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → thêm file, gián tiếp → mọi thứ ở một nơi ``` ## Bootstrap một ứng dụng standalone (không AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // cấu hình router theo lối hàm provideHttpClient(), // HttpClient mà không cần HttpClientModule ], }); ``` Các ứng dụng standalone thay thế root `AppModule` bằng `bootstrapApplication` và các hàm **`provideX`** — một cách cấu hình sạch sẽ hơn, dựa trên hàm. ## Lợi ích ```text ✓ Ít boilerplate — không có file NgModule để bảo trì ✓ Phụ thuộc tường minh — thấy chính xác một component dùng gì ✓ Lazy loading dễ hơn — loadComponent() trực tiếp ✓ Mô hình tư duy đơn giản hơn — component là các đơn vị độc lập ✓ Tiềm năng tree-shaking tốt hơn ``` ## Tại sao điều này quan trọng Standalone component là **hướng đi hiện đại của Angular** — framework giờ dựng standalone theo mặc định và cung cấp các hàm `provideX` để cấu hình tính năng mà không cần module. Chúng loại bỏ gánh nặng NgModule kéo dài, làm các phụ thuộc tường minh và cục bộ, và đơn giản hóa lazy loading cùng mô hình tư duy tổng thể. Hiểu standalone (và thiết lập `bootstrapApplication`/`provideRouter`/`provideHttpClient`) là thiết yếu để làm việc trong Angular hiện tại, trong khi kiến thức về NgModule vẫn cần cho code cũ.