स्टैंडअलोन कम्पोनेन्टहरू के हुन्?

Question

Accepted Answer

**स्टैंडअलोन कम्पोनेन्टहरू** (Angular 14+, नयाँ संस्करणहरूमा पूर्वनिर्धारित) एक कम्पोनेन्टलाई यसको **आफ्नै निर्भरताहरू सीधै घोषणा गर्न** दिन्छन्, `NgModule` मा सम्बन्धित हुन आवश्यक नभई। तिनीहरूले बहुत अनुपयोगी कोड हटाउँछन् र अब Angular अनुप्रयोगहरू बनाउनको लागि सिफारिस गरिएको तरिका हुन्। ## एक स्टैंडअलोन कम्पोनेन्ट ```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 = []; } ``` कम्पोनेन्टले ठीक त्यही आयात गर्छ जो यसको टेम्प्लेटले प्रयोग गर्छ (`CommonModule` को लागि `*ngFor`, `RouterLink` को लागि लिङ्कहरू) — यसका निर्भरताहरू स्पष्ट र सहस्थित हुन्छन्, अलग `NgModule` मा घोषणा गर्नुको सट्टा। ## NgModules सँगको तुलना ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## स्टैंडअलोन अनुप्रयोग बूटस्ट्र्यापिङ (कोनै 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 ], }); ``` स्टैंडअलोन अनुप्रयोगहरूले रूट `AppModule` लाई `bootstrapApplication` र **`provideX`** प्रकार्यहरूद्वारा प्रतिस्थापन गर्छन् — एक सफा, प्रकार्य-आधारित कन्फिगरेशन। ## लाभहरू ```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 ``` ## यो किन महत्त्वपूर्ण छ स्टैंडअलोन कम्पोनेन्टहरू **Angular को आधुनिक दिशा** हुन् — फ्रेमवर्कले अब पूर्वनिर्धारितद्वारा स्टैंडअलोन अधिरचना गर्छ र मोड्युलहरू बिना सुविधाहरू कन्फिगर गर्न `provideX` प्रकार्यहरू प्रदान गर्छ। तिनीहरूले दीर्घकालीन NgModule ओभरहेड हटाउँछन्, निर्भरताहरूलाई स्पष्ट र स्थानीय बनाउँछन्, र अलस्य लोडिङ र समग्र मानसिक मडेललाई सरल बनाउँछन्। स्टैंडअलोन (र `bootstrapApplication`/`provideRouter`/`provideHttpClient` सेटअप) बुझ्नु वर्तमान Angular मा काम गर्नको लागि आवश्यक छ, जबकि NgModule ज्ञान लिगेसी कोडको लागि आवश्यक रहन्छ।