Apa itu komponen standalone?

Question

Accepted Answer

**Komponen standalone** (Angular 14+, standar di versi yang lebih baru) memungkinkan sebuah komponen untuk **mendeklarasikan dependensinya sendiri secara langsung**, tanpa perlu menjadi bagian dari `NgModule`. Mereka secara dramatis mengurangi boilerplate dan sekarang merupakan cara yang direkomendasikan untuk membangun aplikasi Angular. ## Sebuah komponen standalone ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` Komponen mengimpor tepat apa yang digunakan templatenya (`CommonModule` untuk `*ngFor`, `RouterLink` untuk tautan) — dependensinya bersifat eksplisit dan co-located, daripada dideklarasikan dalam NgModule yang terpisah. ## Kontras dengan NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Memulai aplikasi standalone (tanpa AppModule) ```ts 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 dan berbasis fungsi. ## Manfaat ```text ✓ 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 ``` ## Mengapa ini penting Komponen standalone adalah **arah modern Angular** — framework sekarang secara default melakukan scaffold standalone dan menyediakan fungsi `provideX` untuk mengonfigurasi fitur tanpa modul. Mereka menghilangkan beban NgModule yang telah lama ada, membuat dependensi eksplisit dan lokal, dan menyederhanakan lazy loading dan model mental keseluruhan. Memahami standalone (dan setup `bootstrapApplication`/`provideRouter`/`provideHttpClient`) sangat penting untuk bekerja di Angular saat ini, sementara pengetahuan NgModule tetap diperlukan untuk kode legacy.