Standalone components کیا ہیں؟

Question

Accepted Answer

**Standalone components** (Angular 14+، نئے ورژن میں ڈیفالٹ) ایک component کو اپنی **خود کی dependencies کو براہ راست declare کرنے** دیتے ہیں، بغیر کسی `NgModule` سے تعلق رکھے۔ یہ boilerplate کو بہت کم کرتے ہیں اور اب Angular apps بنانے کا recommended طریقہ ہیں۔ ## ایک standalone component ```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 = []; } ``` یہ component بالکل صحیح یہی import کرتا ہے جو اس کا template استعمال کرتا ہے (`CommonModule` کے لیے `*ngFor`، `RouterLink` کے لیے links) — اس کی dependencies واضح اور ایک جگہ ہیں، الگ NgModule میں declare کرنے کی بجائے۔ ## NgModules کے ساتھ موازنہ ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## ایک standalone app کو bootstrap کرنا (کوئی 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 ], }); ``` Standalone apps روٹ `AppModule` کو `bootstrapApplication` اور **`provideX`** functions سے بدل دیتے ہیں — ایک صاف ستھرا، function-based configuration۔ ## فوائل ```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 ``` ## اس کی اہمیت Standalone components **Angular کی جدید سمت** ہیں — framework اب standalone کو ڈیفالٹ سے scaffold کرتا ہے اور modules کے بغیر features کو configure کرنے کے لیے `provideX` functions فراہم کرتا ہے۔ یہ طویل المدت NgModule کے overhead کو ہٹاتے ہیں، dependencies کو واضح اور مقامی بناتے ہیں، اور lazy loading اور مجموعی mental model کو آسان بناتے ہیں۔ Standalone (اور `bootstrapApplication`/`provideRouter`/`provideHttpClient` setup) کو سمجھنا موجودہ Angular میں کام کرنے کے لیے ضروری ہے، جب کہ legacy code کے لیے NgModule کا علم ضروری رہتا ہے۔