X'inhuma l-komponenti standalone?

Question

Accepted Answer

**Komponenti standalone** (Angular 14+, impliċit fil-verżjonijiet ġodda) jippermettu lill-komponenti li **jiddikjaraw id-dipendenzi tagħhom stess direttament**, mingħajr il-ħtieġa li jappartjenu ma' `NgModule`. Huma jnaqqsu drastikament il-boilerplate u issa huma l-mod rakkomandat biex tibni applikazzjonijiet Angular. ## Komponenti 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 = []; } ``` Il-komponenti jimporta eżattament dak li jimplika l-template tagħha (`CommonModule` għal `*ngFor`, `RouterLink` għal links) — id-dipendenza tiegħu huma espliċiti u ko-lokati, minflok jiddikjaraw f'`NgModule` separati. ## Il-kuntrast ma' NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Bootstrapping ta' applikazzjoni standalone (mingħajr 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 ], }); ``` L-applikazzjonijiet standalone jissostitwixxu l-`AppModule` tal-għerq ma' `bootstrapApplication` u funzjonijiet **`provideX`** — konfigurazzjoni aktar nadifa bbazata fuq il-funzjoni. ## Benefiċċji ```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 ``` ## Għaliex dan huwa importanti Il-komponenti standalone huma **l-direzzjoni moderna ta' Angular** — il-framework issa jiskaffold standalone bil-default u jipprovdi funzjonijiet `provideX` biex tikkunfigura l-features mingħajr moduli. Huma neħħu l-overhead tal-NgModule li daħal lura, jagħmlu d-dipendenzi espliċiti u lokali, u jissimplifikaw il-lazy loading u l-mudell mentali ġenerali. L-għarfien ta' standalone (u l-qamħ `bootstrapApplication`/`provideRouter`/`provideHttpClient`) huwa essenzjali biex taħdem fl-Angular attwali, filwaqt li l-għarfien ta' NgModule jibqa' meħtieġ għall-kodiċi legacy.