Apa iku komponen standalone?

Question

Accepted Answer

**Komponen standalone** (Angular 14+, standar ing versi sing luwih anyar) memungkinake komponen kanggo ndeklarasiake **dependensi dhirine sacara langsung**, tanpa kudu milik `NgModule`. Iku nyuda boilerplate kanthi drastis lan saiki dadi cara sing direkomendasiake kanggo mbangun aplikasi Angular. ## 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 iki ngimport padhang apa wae sing dianggo template-ne (`CommonModule` kanggo `*ngFor`, `RouterLink` kanggo link) — dependensi-ne iku eksplisit lan co-located, tinimbang dideklarasiake ing NgModule sing kapisah. ## Kontras karo NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping 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 ngganti root `AppModule` karo `bootstrapApplication` lan fungsi **`provideX`** — konfigurasi sing luwih resik lan basis fungsi. ## Keuntungan ```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 ``` ## Mulane penting Komponen standalone iku **arah modern Angular** — framework saiki ngilang standalone kanthi baku lan nyedhiyake fungsi `provideX` kanggo ngatur fitur tanpa modul. Bok ngilangi overhead NgModule sing wis suwe, gawe dependensi eksplisit lan lokal, lan sederhanake lazy loading lan mental model sakabehane. Paham standalone (lan setup `bootstrapApplication`/`provideRouter`/`provideHttpClient`) iku penting kanggo ngerjake Angular saiki, nanging ngerti NgModule tetep dibutuhake kanggo kode legacy.