Angular بدون NgModule شرح Standalone

🚀 لو بتستخدم Angular أو لسه ناوي تبدأ… أكيد سمعت عن فكرة Standalone Components
لكن هل الموضوع مجرد تحسين بسيط؟ ولا تغيير جذري في طريقة بناء التطبيقات؟
خليني أوضح لك الصورة بشكل عملي وبأسلوب بسيط 👇

قبل: عصر NgModule (النظام التقليدي)​

لفترة طويلة، كان Angular بيعتمد على مفهوم NgModule كجزء أساسي من أي تطبيق.
📦 كل حاجة كانت لازم تمر من خلاله:

• كل Component لازم يتسجل داخل Module
• إدارة الـ dependencies تتم عن طريقه
• تنظيم المشروع يعتمد عليه بشكل كامل

💡 ده كان بيدي: ✔️ تنظيم واضح ❌ لكن في نفس الوقت:

• كود كتير (Boilerplate)
• تعقيد للمبتدئين
• صعوبة في التتبع أحيانًا

مثال بسيط (NgModule)​

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

👆 هنا لازم كل حاجة تتربط من خلال Module.

---

الآن: عصر Standalone Components​

مع Angular 14+ حصل تغيير مهم جدًا ⚡
بقى ممكن تعمل Component مستقل بالكامل بدون NgModule.

✔️ كل Component يعرف dependencies بتاعته بنفسه
✔️ تقدر تعمل bootstrap مباشرة
✔️ الكود بقى أبسط بكتير​

مثال عملي (Standalone)​

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Hello Standalone 🚀</h1>`
})
export class AppComponent {}

bootstrapApplication(AppComponent);

🔥 الفرق واضح: مفيش Module… كل حاجة مباشرة وواضحة.

---

الفرق الحقيقي (مش مجرد Syntax)​

🧠 1. تغيير في طريقة التفكير (Architecture)​

• NgModule → نظام مركزي (Centralized)
• Standalone → نظام موزّع (Decentralized)

يعني بدل ما كل حاجة تبقى متجمعة في مكان واحد…
كل Component بقى مسؤول عن نفسه.

⚡ 2. تجربة المطور (Developer Experience)​

Standalone بيخليك:

• تبدأ أسرع
• تكتب كود أقل
• تركز على المنطق بدل الإعدادات

💡 خصوصًا للمبتدئين… الموضوع بقى أسهل بكتير.

🚀 3. الأداء (Performance)​

Standalone بيساعد في:

✔️ Lazy Loading أدق
✔️ تقليل حجم التطبيق (Bundle Size)
✔️ تحميل أسرع للصفحات​

وده مهم جدًا في تحسين Core Web Vitals وSEO.

🔄 4. إعادة الاستخدام (Reusability)​

بدل ما: تستورد Module كامل
بقيت: تستورد Component مباشرة
🎯 ده بيسهل بناء تطبيقات modular ومرنة.

---

ليه التغيير ده مهم فعلًا؟​

Angular كان بيتعرض لانتقادات بسبب:
❌ التعقيد ❌ كثرة الملفات ❌ صعوبة التعلم

💡 Standalone جه يحل المشاكل دي من الجذور:
👈 خلي كل Component:

• مستقل - واضح - سهل الاستخدام

---

هل NgModule انتهى؟​

الإجابة المختصرة: ❌ لا
لكن 👇

✔️ مبقاش هو الخيار الأساسي
✔️ المشاريع الجديدة ⬅️ بتستخدم Standalone
✔️ المشاريع القديمة ⬅️ بتتحول تدريجيًا (Migration)​

---

امتى تستخدم Standalone وامتى تستخدم NgModule؟​

استخدم Standalone لو:​

• بتبدأ مشروع جديد
• عايز سرعة في التطوير
• بتشتغل على تطبيق حديث

استخدم NgModule لو:​

• المشروع قديم
• فيه Dependencies كبيرة مبنية عليه
• لسه مش جاهز للتحويل

---

مثال Lazy Loading باستخدام Standalone​

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () =>
      import('./home.component').then(m => m.HomeComponent)
  }
];

🔥 لاحظ: Lazy Loading بقى أسهل وأنضف بكتير.

---

الخلاصة​

Angular ما عملش مجرد تحديث… هو فعلاً غيّر طريقة التفكير 💡
👈 من:
"كل حاجة داخل Modules"
👈 إلى:
"كل Component مسؤول عن نفسه"
والنتيجة ؟

✔️ كود أبسط ✔️ تطوير أسرع ✔️ أداء أفضل ✔️ تجربة مطور أحسن 🎯​