સ્વતંત્ર ઘટકો શું છે?

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 = []; } ``` ઘટક તેના template નો ઉપયોગ કરે તે બરાબર આયાત કરે છે (`*ngFor` માટે `CommonModule`, લિંક્સ માટે `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 ``` ## સ્વતંત્ર applicaton 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 ], }); ``` સ્વતંત્ર applications રુટ `AppModule` ને `bootstrapApplication` અને **`provideX`** functions સાથે બદલે છે — સાફ, function-આધારિત 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 ``` ## તે શા માટે મહત્ત્વપૂર્ણ છે સ્વતંત્ર ઘટકો Angular નો **આધુનિક દિશા** છે — framework હવે ડિફોલ્ટ રીતે સ્વતંત્ર scaffold કરે છે અને modules વિના સુવિધા configure કરવા માટે `provideX` functions આપે છે. તેઓ લાંબા સમયથી NgModule ઓવરહેડ દૂર કરે છે, અવલંબિતાઓને સ્પષ્ટ અને સ્થાનિક બનાવે છે, અને lazy loading અને એકંદર માનસિક મોડલને સરળ બનાવે છે. સ્વતંત્ર (અને `bootstrapApplication`/`provideRouter`/`provideHttpClient` setup) સમજવું વર્તમાન Angular માં કામ કરવા માટે આવશ્યક છે, જ્યારે NgModule જ્ઞાન લીગેસી કોડ માટે જરૂરી રહે છે.