کوتاه کردن مسیرآدرس دهی در import statement برای انگولار

وقت کار با Angular ، وارد کردن مسیر و import کردن متدها،سرویس ها ، مدل ها و ... در TypeScript کاری هستش که ما اغلب انجام می دیم.ممکن این مسیر ها چند تا فایل اون ور تر باشه، بنابراین وقتی به مسیر این فایل ها توی import statement نگاه می کنیم ، میبینیم یه مسیر طولانی برای نوشتنش طی کردیم.مثل این مورد :

import { ArticleForm } from '../../../views/article-form/article-form';

خیلی وقتا به این مسیر ها بی توجهی نشون میدیم و از سر این که خیلی از نرم افزارها مثل vs code خودش میاد این مسیر برای ما توی component ایجاد می کنه ، بی تفاوت رد میشیم.

اما من سعی دارم توی این مقاله راهی به شما نشون بدم که این مسیر شما کوتاه تر کنید تا کدهای شما خلوت تر و منظم تر به چشم بیان ، یه چیزی شبیه این :

import { ArticleForm } from '@views/article-form/article-form';

یکی از جنبه های مهم داشتن نام های مستعار توی مسیر این هستش که نام های مستعار به عنوان سندی از عدم اختلاط مسیرهای نسبی و مطلق عمل می کنند.

من سعی می کنم این موضوع توی 3 قدم برای شما توضیح بدم:

قدم اول _ اولین قدم شناسایی لیست دایرکتوری های ریشه این نام های مستعار هستش. مثلا :

@app

@views

@services

قدم دوم _ tsconfig.json را تغییر بدید:

{
 &quotcompileOnSave&quot: false,
 &quotcompilerOptions&quot: { 
   &quotbaseUrl&quot: &quot./src&quot,  
   &quotpaths&quot: {    
           &quot@angular/*&quot: [ &quot../node_modules/@angular/*&quot ],    
           &quot@app/*&quot: [&quotapp/*&quot],   
           &quot@views/*&quot: [&quotapp/views/*&quot],   
           &quot@services/*&quot: [&quotapp/services/*&quot]
   },
...}

قدم سوم _ tsconfig.app.json را تغییر دهید. به سراغ فایل tsconfig.app.json برید و اونجا اگر این خط کد دیدید حذف کنید

&quotpaths&quot: {      
   &quot@angular/*&quot: [ &quot../node_modules/@angular/*&quot ]
}

از این به بعد مسیر دهی خودتون می تونید در tsconfig.json انجام بدید.

حالا از این به بعد می تونید برگردید به component های خودتون و مسیرهاتون مثل من اصلاح کنید:

import { ArticleForm } from '@views/article-form/article-form';

امیدوارم از این مقاله استفاده لازم برده باشید.

ممنون از توجهتون :)