إعداد وإدارة بيئات العمل

بيئات العمل في أنجلرAngular Environmentsإعدادات التطوير والإنتاجAngular 22.1 EnvironmentsFile Replacements

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

بيئة العمل	الاستخدام الأساسي	التأثير والمميزات
بيئة التطوير (Development)	تُستخدم أثناء بناء التطبيق على الخادم المحلي (ng serve)	تحتوي على روابط تجريبية وتوفر رسائل خطأ مفصلة لتسهيل التصحيح
بيئة الإنتاج (Production)	تُستخدم عند تجهيز ورفع التطبيق للمستخدمين النهائيين (ng build)	تستخدم الروابط الحقيقية ويتم فيها ضغط الكود وإلغاء رسائل الخطأ التفصيلية لرفع الأداء

الشرح

أثناء تطوير تطبيقات Angular 22.1، من النادر جداً أن تكون إعدادات التطبيق متطابقة بين مرحلة البرمجة المحلية (Development) ومرحلة النشر الفعلي للمستخدمين (Production). على سبيل المثال، الروابط الخاصة بالخادم (APIs) تختلف تماماً بين البيئتين. يوفر لنا Angular نظاماً متكاملاً لإدارة هذه المتغيرات بسهولة واحترافية من خلال ما يُعرف بـ بيئات العمل (Environments

تفصيل التعامل مع بيئات العمل في Angular 22.1

توليد ملفات البيئة:

في الإصدارات الحديثة من Angular، لم تعد ملفات البيئة تُولد افتراضياً مع إنشاء المشروع الجديد لتخفيف حجم الملفات. لإضافتها، نستخدم أمر CLI مخصص: ng generate environments سيقوم هذا الأمر بإنشاء مجلد environments يحتوي على ملفين: environment.ts (للإنتاج) و environment.development.ts (للتطوير).

آلية استبدال الملفات (File Replacement):

يعتمد Angular على إعدادات موجودة مسبقاً في ملف angular.json تقوم بتبديل ملف البيئة تلقائياً. عند تشغيل التطبيق محلياً يتم استخدام النسخة الخاصة بالتطوير، وعند طلب بناء التطبيق للإنتاج، تقوم أداة البناء باستبدال الملف تلقائياً بالنسخة النهائية دون الحاجة لتغيير الكود.

أمثلة برمجية: إعداد واستخدام المتغيرات البيئية

المثال الأول: تعريف المتغيرات داخل ملفات البيئة

في ملف التطوير environment.development.ts، نضع الرابط المحلي:

typescript

1	export const environment = {
2	production: false,
3	apiUrl: 'http://localhost:3000/api/v1'
4	};

وفي ملف الإنتاج environment.ts، نضع الرابط الحقيقي للخادم:

typescript

1	export const environment = {
2	production: true,
3	apiUrl: 'https://api.my-domain.com/v1'
4	};

المثال الثاني: استدعاء المتغير البيئي داخل خدمة (Service)

نستورد دائماً ملف environment.ts الأساسي (بدون كلمة development)، وسيتكفل Angular بتبديله تلقائياً بناءً على طريقة تشغيل التطبيق:

typescript

1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';
3	import { environment } from '../../environments/environment';
4
5	@Injectable({
6	providedIn: 'root'
7	})
8	export class UserService {
9	// استخدام المتغير البيئي لجلب الرابط الديناميكي
10	private baseUrl = environment.apiUrl;
11
12	constructor(private http: HttpClient) {}
13
14	getUsers() {
15	return this.http.get(`${this.baseUrl}/users`);
16	}
17	}

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

—احذر من تسريب البيانات الحساسة!
—على الرغم من فائدة ملفات الـ Environments، إلا أنه يُمنع منعاً باتاً تخزين أي كلمات مرور، أو مفاتيح سرية (Secret Keys) لخدمات الدفع، أو أي بيانات حساسة داخلها. هذه الملفات يتم تحويلها إلى كود جافاسكربت وتصبح مرئية لأي مستخدم يفتح أدوات المطورين في المتصفح. استخدمها فقط للروابط والمتغيرات العامة.

الدرس السابق

التحكم في إعدادات المشروع

الدرس التالي

بناء التطبيق للإنتاج وتجهيزه للنشر

بيئة العمل

الاستخدام الأساسي

التأثير والمميزات

بيئة التطوير (Development)

تُستخدم أثناء بناء التطبيق على الخادم المحلي (ng serve)

تحتوي على روابط تجريبية وتوفر رسائل خطأ مفصلة لتسهيل التصحيح

بيئة الإنتاج (Production)

تُستخدم عند تجهيز ورفع التطبيق للمستخدمين النهائيين (ng build)

تستخدم الروابط الحقيقية ويتم فيها ضغط الكود وإلغاء رسائل الخطأ التفصيلية لرفع الأداء

تفصيل التعامل مع بيئات العمل في Angular 22.1

توليد ملفات البيئة:

آلية استبدال الملفات (File Replacement):

أمثلة برمجية: إعداد واستخدام المتغيرات البيئية

المثال الأول: تعريف المتغيرات داخل ملفات البيئة

في ملف التطوير environment.development.ts، نضع الرابط المحلي:

typescript

1	export const environment = {
2	production: false,
3	apiUrl: 'http://localhost:3000/api/v1'
4	};

وفي ملف الإنتاج environment.ts، نضع الرابط الحقيقي للخادم:

typescript

1	export const environment = {
2	production: true,
3	apiUrl: 'https://api.my-domain.com/v1'
4	};

المثال الثاني: استدعاء المتغير البيئي داخل خدمة (Service)

typescript

1	import { Injectable } from '@angular/core';
2	import { HttpClient } from '@angular/common/http';
3	import { environment } from '../../environments/environment';
4
5	@Injectable({
6	providedIn: 'root'
7	})
8	export class UserService {
9	// استخدام المتغير البيئي لجلب الرابط الديناميكي
10	private baseUrl = environment.apiUrl;
11
12	constructor(private http: HttpClient) {}
13
14	getUsers() {
15	return this.http.get(`${this.baseUrl}/users`);
16	}
17	}