ما هي المكونات المستقلة (Standalone Components)؟

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` مطلوبة للأكواد القديمة.