Standalone components என்றால் என்ன?

Question

Accepted Answer

**Standalone components** (Angular 14+, புதிய பதிப்புகளில் இயல்பானது) ஒரு component-ஐ `NgModule`-க்கு சொந்தமாக இருக்கத் தேவையின்றி அதன் **சொந்த dependencies-ஐ நேரடியாக** அறிவிக்க அனுமதிக்கிறது. அவை boilerplate-ஐ வெகுவாகக் குறைக்கின்றன, மேலும் இப்போது Angular apps-ஐ உருவாக்க பரிந்துரைக்கப்பட்ட வழியாகும். ## ஒரு 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 அதன் template பயன்படுத்துவதை சரியாக import செய்கிறது (`*ngFor`-க்கு `CommonModule`, links-க்கு `RouterLink`) — அதன் dependencies தனிப்பட்ட NgModule-ில் அறிவிக்கப்படுவதற்குப் பதிலாக வெளிப்படையானதாகவும் ஒரே இடத்தில் இருப்பதாகவும் உள்ளன. ## 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 root `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 ``` ## இது ஏன் முக்கியம் Standalone components என்பது **Angular-ின் நவீன திசை** — framework இப்போது இயல்பாக standalone-ஐ scaffold செய்கிறது மேலும் modules இல்லாமல் features-ஐ configure செய்ய `provideX` functions-ஐ வழங்குகிறது. அவை நீண்டகால NgModule overhead-ஐ அகற்றுகின்றன, dependencies-ஐ வெளிப்படையாகவும் local-ஆகவும் ஆக்குகின்றன, மேலும் lazy loading-ஐயும் ஒட்டுமொத்த mental model-ஐயும் எளிமைப்படுத்துகின்றன. Standalone-ஐ (மற்றும் `bootstrapApplication`/`provideRouter`/`provideHttpClient` setup-ஐ) புரிந்துகொள்வது தற்போதைய Angular-ில் வேலை செய்வதற்கு அவசியமானது, அதே நேரத்தில் legacy code-க்கு NgModule அறிவு இன்னும் தேவைப்படுகிறது.