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

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

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

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

1. ایجاد پوشه web:

   • ابتدا در مسیر اصلی پروژه Appsan خود، یک پوشه به نام web ایجاد کنید.
   • این پوشه قرار است حاوی کد منبع پروژه‌های وب شما باشد.

2. ایجاد پوشه برای پروژه Angular:

   • درون پوشه web، یک پوشه جدید به نام پروژه Angular خود ایجاد کنید. به عنوان مثال، اگر پروژه Angular شما "MyAngularProject" نام دارد، یک پوشه به نام MyAngularProject بسازید.

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

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

   • به پوشه‌ای که در مرحله قبل در web ایجاد کردید بروید (web/MyAngularProject) و پروژه 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 را به ../../webdist/[web-folder-name] تغییر دهید. به جای [web-folder-name]، نام پوشه‌ای که برای پروژه وب خود در webdist استفاده خواهید کرد را قرار دهید.
   • به عنوان مثال، اگر نام پروژه شما "MyAngularProject" است، تنظیمات باید به شکل زیر باشد:

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

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

برای اطمینان از اینکه منابع پروژه به درستی بارگذاری می‌شوند، باید baseHref را به ./ تغییر دهید. این کار را می‌توانید به دو روش انجام دهید:

1. تنظیم baseHref از طریق خط فرمان:

   • هنگام ساخت پروژه، می‌توانید از دستور زیر استفاده کنید:

   ng build --base-href ./
   

2. تنظیم baseHref در angular.json:

   • به جای استفاده از خط فرمان، می‌توانید baseHref را به طور دائم در فایل angular.json تنظیم کنید.
   • به بخش architect و زیر بخش build بروید و مقدار baseHref را به ./ تغییر دهید:

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

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

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

   • پس از اعمال تغییرات در angular.json و تنظیم baseHref، با استفاده از دستور ng build پروژه خود را بسازید.
   • فایل‌های ساخته شده باید در پوشه‌ای با نام پروژه در webdist ذخیره شوند.

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

   • به پوشه webdist در پروژه Appsan خود بروید و بررسی کنید که فایل‌های ساخته شده به درستی در مسیر webdist/[web-folder-name] قرار گرفته باشند.

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

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

   • از عنصر webpage در پروژه Appsan خود استفاده کنید و ویژگی src را به نام پوشه‌ای که پروژه Angular در webdist ذخیره شده است، تنظیم کنید.

   مثال:

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

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

   • پروژه Appsan خود را اجرا کنید و مطمئن شوید که پروژه Angular به درستی بارگذاری می‌شود.

نکات مهم

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

این راهنما به شما کمک می‌کند تا پروژه‌های Angular خود را به‌طور کارآمد در پروژه‌های Appsan ادغام کنید و از قابلیت‌های جدید این چارچوب بهره‌مند شوید.