Standalone bileşenler nedir?

Question

Accepted Answer

**Standalone bileşenler** (Angular 14+, daha yeni versiyonlarda varsayılan) bir bileşenin **kendi bağımlılıklarını doğrudan tanımlamasına** izin verir, bir `NgModule`'e ait olmak zorunda kalmadan. Boilerplate'i önemli ölçüde azaltır ve şu anda Angular uygulamaları oluşturmanın önerilen yoludur. ## Standalone bir bileşen ```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 = []; } ``` Bileşen, şablonunun kullandığı şeyleri (`*ngFor` için `CommonModule`, linkler için `RouterLink`) tam olarak içeri aktarır — bağımlılıkları açık ve yan yana bulunur, ayrı bir NgModule'de tanımlanmış olmak yerine. ## NgModule'lerle karşılaştırma ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Standalone bir uygulamayı önyükleme (AppModule yok) ```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 ], }); ``` Standalone uygulamalar kök `AppModule`'ü `bootstrapApplication` ve **`provideX`** fonksiyonlarıyla değiştirir — daha temiz, fonksiyon tabanlı bir yapılandırma. ## Faydalar ```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 ``` ## Neden önemli Standalone bileşenler **Angular'ın modern yönü**dür — framework artık varsayılan olarak standalone ile scaffolding yapar ve modüller olmadan özellikleri yapılandırmak için `provideX` fonksiyonları sağlar. Uzun süredir devam eden NgModule'ün yükünü ortadan kaldırır, bağımlılıkları açık ve yerel hale getirir, ve lazy loading ile genel zihinsel modeli basitleştirir. Standalone'ı (ve `bootstrapApplication`/`provideRouter`/`provideHttpClient` kurulumunu) anlamak güncel Angular'da çalışmak için gereklidir; NgModule bilgisi ise eski kodlar için hala gereklidir.