Çfarë janë komponentët standalone?

Question

Accepted Answer

**Komponentët standalone** (Angular 14+, parazgjedhje në versionet më të reja) i lejojnë një komponent të deklarojë **varësitë e tij direkt**, pa pasur nevojë të përkasojë një `NgModule`. Ato zvogëlojnë drastikisht boilerplate-in dhe janë tani mënyra e rekomanduar për të ndërtuar aplikacione Angular. ## Një komponent 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 = []; } ``` Komponenti importon saktësisht atë që përdor template-i i tij (`CommonModule` për `*ngFor`, `RouterLink` për lidhjet) — varësitë e tij janë eksplicite dhe bashkë-vendosur, në vend që të shpenzohen në një `NgModule` të veçantë. ## Kontrastimi me NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Inicializimi i një aplikacioni standalone (pa 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 ], }); ``` Aplikacimet standalone zëvendësojnë root `AppModule`-in me `bootstrapApplication` dhe funksionet **`provideX`** — një konfiguracion më i pastër, bazuar në funksione. ## Përfitimet ```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 ``` ## Pse ka rëndësi Komponentët standalone janë **drejtimi modern i Angular** — korniza tani ndërtojnë standalone si parazgjedhje dhe ofrojnë funksionet `provideX` për të konfiguruar veçoritë pa module. Ata hiqen nga përshkrimi i gjatë i NgModule, bëjnë varësitë eksplicite dhe lokale, dhe thjeshtojnë lazy loading-un dhe modelin mendor të përgjithshëm. Komprehensioni i standalone (dhe konfigurimit `bootstrapApplication`/`provideRouter`/`provideHttpClient`) është thelbësor për të punuar në Angular aktual, ndërsa njohuritë për NgModule-in mbeten të nevojshme për kodimin trashëgim.