إعداد وتكوين HttpClient في التطبيقات الحديثة باستخدام provideHttpClient

provideHttpClientStandalone ArchitectureInterceptors RegistrationDependency Injection

جدول مرجعي سريع

طريقة التكوين المعمارية (`Architecture Approach`)	مكان التسجيل والإعداد	آلية تفعيل الميزات الإضافية (مثل Interceptors)
الطريقة التقليدية (`HttpClientModule`)	داخل مصفوفة `imports` في ملف `AppModule`	عبر تسجيلها في مزودات النظام بصورة منفصلة ومعقدة
الطريقة الحديثة (`provideHttpClient`)	داخل مصفوفة `providers` في دالة `appConfig`	باستخدام ميزات تمرير المعلمات مثل `withInterceptors` أو `withFetch` ببساطة وسلاسة

الشرح

في معمارية Angular 22.1 المعتمدة بالكامل على المكونات المستقلة (Standalone Components)، تم الاستغناء نهائياً عن وحدات الـ NgModule التقليدية مثل HttpClientModule. يتم الآن تفعيل وتكوين خدمة HttpClient على مستوى التطبيق بالكامل مباشرة داخل ملف التكوين الرئيسي (app.config.ts) باستخدام دالة المزود الحديثة provideHttpClient.

تفصيل فلسفة وعمل تكوين الشبكة

الاعتماد على المكونات المستقلة:

تتيح لك الطريقة الحديثة حقن خدمات الشبكة مباشرة دون الحاجة لبيئة العمل القديمة القائمة على الموديولات، مما يجعل هيكل التطبيق أثقل وزناً وأسرع في التشغيل.

التكامل مع Fetch API:

يمنحك استخدام دالة المزود مرونة عالية في تفعيل واجهة المتصفح الأصلية مباشرة لتقليل حجم حزمة البناء النهائية ودعم العرض من جهة الخادم بكفاءة.

⚠️ تحذير

تذكر أن إهمال تسجيل مزودات الشبكة بالطريقة الحديثة سيؤدي إلى فشل فوري في حقن خدمة HttpClient داخل المكونات المستقلة! تأكد دائماً من وجود دالة provideHttpClient في مصفوفة مزودات ملف التكوين الرئيسي للتطبيق.

مثال برمجي موسع: تكوين التطبيق الحديث

تكوين مزودات الشبكة في ملف app.config.ts (app.config.ts)

typescript

1	import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2	import { provideRouter } from '@angular/router';
3	import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
4	import { routes } from './app.routes';
5
6	export const appConfig: ApplicationConfig = {
7	providers: [
8	provideZoneChangeDetection({ eventCoalescing: true }),
9	provideRouter(routes),
10	// تفعيل HttpClient الحديث مع استخدام واجهة Fetch API المتقدمة
11	provideHttpClient(
12	withFetch()
13	)
14	]
15	};

نصائح احترافية

—استخدم دائماً ميزة withFetch() عند تكوين provideHttpClient في تطبيقات أنجولر الحديثة!
—هذه الميزة تجعل الخدمة تعتمد على واجهة المتصفح الأصلية Fetch API، مما يقلل حجم حزمة البناء النهائية (Bundle Size) ويدعم ميزات العرض من جهة الخادم (SSR) بكفاءة أعلى.

الدرس السابق

دمج تدفقات البيانات الزمنية باستخدام المشغلات الأساسية

الدرس التالي

إرسال طلبات القراءة والحصول على البيانات

طريقة التكوين المعمارية (`Architecture Approach`)

مكان التسجيل والإعداد

آلية تفعيل الميزات الإضافية (مثل Interceptors)

الطريقة التقليدية (`HttpClientModule`)

داخل مصفوفة `imports` في ملف `AppModule`

عبر تسجيلها في مزودات النظام بصورة منفصلة ومعقدة

الطريقة الحديثة (`provideHttpClient`)

داخل مصفوفة `providers` في دالة `appConfig`

باستخدام ميزات تمرير المعلمات مثل `withInterceptors` أو `withFetch` ببساطة وسلاسة

تفصيل فلسفة وعمل تكوين الشبكة

الاعتماد على المكونات المستقلة:

التكامل مع Fetch API:

⚠️ تحذير

مثال برمجي موسع: تكوين التطبيق الحديث

تكوين مزودات الشبكة في ملف app.config.ts (app.config.ts)

typescript

1	import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2	import { provideRouter } from '@angular/router';
3	import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
4	import { routes } from './app.routes';
5
6	export const appConfig: ApplicationConfig = {
7	providers: [
8	provideZoneChangeDetection({ eventCoalescing: true }),
9	provideRouter(routes),
10	// تفعيل HttpClient الحديث مع استخدام واجهة Fetch API المتقدمة
11	provideHttpClient(
12	withFetch()
13	)
14	]
15	};