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