Komponen standalone (Angular 14+, lalai dalam versi lebih baru) memungkinkan komponen untuk mendeklarasikan dependensi miliknya sendiri secara langsung, tanpa perlu milik NgModule. Mereka secara drastis mengurangi boilerplate dan sekarang merupakan cara yang direkomendasikan untuk membangun aplikasi Angular.
{ } ;
{ } ;
{ } ;
({
: ,
: ,
: [, ],
: ,
})
{
users = [];
}
Komponen mengimpor tepat apa yang digunakan template-nya (CommonModule untuk *ngFor, RouterLink untuk tautan) — dependensi-nya bersifat eksplisit dan ditempatkan bersama, daripada dideklarasikan dalam NgModule terpisah.
NgModule approach: Standalone approach:
──────────────────────────────────────────────────────────────
@NgModule({ declarations:[Comp], @Component({ standalone: true,
imports:[CommonModule] }) imports:[CommonModule], ... })
→ extra file, indirection → everything in one place
import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { provideHttpClient } from "@angular/common/http";
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes), // configure router functionally
provideHttpClient(), // HttpClient without HttpClientModule
],
});
Aplikasi standalone menggantikan AppModule akar dengan bootstrapApplication dan fungsi provideX — konfigurasi yang lebih bersih berbasis fungsi.
✓ Less boilerplate — no NgModule files to maintain
✓ Explicit dependencies — see exactly what a component uses
✓ Easier lazy loading — loadComponent() directly
✓ Simpler mental model — components are self-contained units
✓ Better tree-shaking potential
Komponen standalone adalah arah modern Angular — kerangka kerja sekarang melakukan scaffold standalone secara standar dan menyediakan fungsi provideX untuk mengonfigurasi fitur tanpa modul.
Mereka menghilangkan overhead NgModule yang telah lama ada, membuat dependensi eksplisit dan lokal, serta menyederhanakan lazy loading dan model mental secara keseluruhan.
Memahami standalone (dan pengaturan bootstrapApplication/provideRouter/provideHttpClient) sangat penting untuk bekerja di Angular saat ini, sementara pengetahuan NgModule tetap diperlukan untuk kode legacy.