راهنمای تنظیم پروژه Angular برای استفاده در Appsan

در این راهنما، نحوه تنظیم پروژه Angular به گونه‌ای که فایل‌های ساخته شده (build) آن به پوشه webdist در پروژه Appsan منتقل شوند و همچنین پروژه Angular در پوشه web مدیریت شود، توضیح داده می‌شود. این تنظیمات به شما امکان می‌دهند که به راحتی از پروژه Angular خود در Appsan استفاده کنید.

۱. ایجاد پوشه‌های مورد نیاز

1. ایجاد پوشه web:
   • در مسیر اصلی پروژه Appsan، یک پوشه به نام web ایجاد کنید.
   • این پوشه حاوی کد منبع پروژه‌های وب شما خواهد بود.
2. ایجاد پوشه برای پروژه Angular:
   • درون پوشه web، پوشه‌ای به نام پروژه Angular خود بسازید (مثلاً MyAngularProject).

۲. ایجاد پروژه Angular در پوشه web

1. ایجاد پروژه Angular در مسیر مناسب:

   ng new MyAngularProject --directory web/MyAngularProject

2. تست پروژه:

   با دستور زیر پروژه را به صورت محلی اجرا کنید و از صحت عملکرد آن مطمئن شوید:

   ng serve

۳. تنظیم مسیر خروجی (outputPath) در angular.json

1. باز کردن فایل angular.json:

   در ریشه پروژه Angular، فایل angular.json را باز کنید.

2. یافتن تنظیمات outputPath:

   در بخش architect → build مقدار outputPath را پیدا کنید.

3. تغییر مسیر خروجی:

   مقدار outputPath را به مسیر زیر تغییر دهید:

   "outputPath": "../../webdist/MyAngularProject"

۴. تنظیم baseHref برای پروژه Angular

برای اطمینان از بارگذاری صحیح منابع، baseHref را به ./ تنظیم کنید:

• از طریق خط فرمان:

  ng build --base-href ./

• در angular.json:

  
  "build": {
    "options": {
      "outputPath": "../../webdist/MyAngularProject",
      "baseHref": "./"
    }
  }
        

۵. ساخت پروژه Angular

1. ساخت پروژه:

   ng build

2. بررسی فایل‌های ساخته شده:

   اطمینان حاصل کنید که فایل‌های خروجی در پوشه webdist/MyAngularProject قرار گرفته باشند.

۶. استفاده از پروژه Angular در Appsan

1. افزودن عنصر webpage در فایل XML:

   <webpage src="MyAngularProject" title="پروژه Angular من"/>

2. اجرای پروژه Appsan:

   پروژه Appsan را اجرا کرده و از بارگذاری صحیح پروژه Angular مطمئن شوید.

نکات مهم

• مطمئن شوید پوشه Angular در web/[project-name] قرار دارد.
• مسیر outputPath در angular.json دقیقاً به پوشه مناسب در webdist اشاره کند.
• همیشه baseHref را به ./ تنظیم کنید.
• پس از هر تغییر در پروژه Angular، مجدداً آن را بسازید و خروجی را به webdist کپی کنید.
• نام پوشه در webdist باید با مقدار src در عنصر webpage مطابقت داشته باشد.