Standalone component trong Angular là gì?

Standalone component tự quản lý dependency của mình. Thay vì được khai báo trong NgModule, nó liệt kê các component, directive và pipe mà nó dùng ngay trong mảng imports của nó.

import { Component } from '@angular/core'
import { DatePipe } from '@angular/common'
import { RouterLink } from '@angular/router'

@Component({
  selector: 'app-greeting',
  imports: [DatePipe, RouterLink],
  template: `
    <p>Today is {{ today | date }}</p>
    <a routerLink="/">Home</a>
  `,
})
export class Greeting {
  today = new Date()
}

App khởi động bằng bootstrapApplication(App, appConfig) và không có root module. Routing, HTTP và các service khác được thiết lập qua các hàm provide... trong config.

Lợi ích:

• Ít boilerplate và không có module phải bảo trì.
• Mỗi component cho thấy chính xác những gì nó dùng.
• Lazy loading dễ hơn và tree-shaking tốt hơn.

Từ Angular 19, component, directive và pipe mặc định là standalone. Ở Angular 14 đến 18 bạn phải viết standalone: true, và bạn sẽ thấy điều đó trong code cũ.

Hãy viết standalone component và chỉ import những gì template dùng.