স্ট্যান্ডঅ্যালোন কম্পোনেন্ট কী?

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 = []; } ``` কম্পোনেন্ট ঠিক তাই ইম্পোর্ট করে যা তার টেমপ্লেট ব্যবহার করে (`*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 ``` ## একটি স্ট্যান্ডঅ্যালোন অ্যাপ বুটস্ট্র্যাপ করা (কোন 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 ], }); ``` স্ট্যান্ডঅ্যালোন অ্যাপ্লিকেশন root `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-এর ওভারহেড দূর করে, নির্ভরতাগুলি স্পষ্ট এবং স্থানীয় করে, এবং lazy loading এবং সামগ্রিক মানসিক মডেলকে সহজ করে। স্ট্যান্ডঅ্যালোন (এবং `bootstrapApplication`/`provideRouter`/`provideHttpClient` সেটআপ) বোঝা বর্তমান Angular-এ কাজ করার জন্য অপরিহার্য, যখন NgModule জ্ঞান উত্তরাধিকার কোডের জন্য প্রয়োজনীয় থাকে।