Alias

I hope you' all are good. stay home stay safe. let's get into our topic Alias when we are developing we usually import our interfaces/services/components right. everyone will do this but how you're doing is the point here. for example, assume you're working on a big project which has more than 20-30 components and its folder structure is nested for 2 levels like that. if you want to import an interface you need to type all those ../../ etc; like this, you have to do. it is really a time taking and confusing at some point like these situations will come. it's really a headache for developers to import services/components/modules/interfaces like this. there is a better approach for these kinds of things and actually angular provides a better way to import and but be careful when developing.

    let's see an example in general we all do the import. now I will also do the same thing here. I am taking an apiservice it has logic to make an API call but here we no need to discuss we stick to the import part only.

example:

import {ApiService} from '../../core/services/http/ApiService'

see here how many levels it took to import the "apiService" service and the same goes for the components or modules import .if you are using vscode you may say that I am no need to worry that I know where/which level I am but remember one thing its a time taking when we are developing we must need to save our time to avoid these types of situations or to overcome we have a concept aliases.

Aliases:

As the name itself tells that we are using an alias name instead of the whole path we use above. here instead of the whole path, we assign an alias name for that using that alias name we can import those things.

this alias is one of the best given by angular and it really helps a lot of developers who are working on large projects. for small projects also we can use these aliases, it always the best to use but for small projects, it's up to you whether to use it or not.

all we have to do is go to the tsconfig.json

and there enter the key "path". 

tsconfig.json

"path":{

"@apiservices/*":"src/app/core/services/http/*",

"@auth":"src/app/core/services/auth/*"

}

here I created two aliases with the names "@apiservices" which is pointing to all my API services located in the http folder and the second "@auth" contains all authorization services that's it we are done with tsconfig.json now stop the server if it is running and restart. it is not required, it will work even without re-starting the server.

import {ApiService} from '@apiservices/ApiService';

yo!!!! that's it now you can do that to every services/modules/components folder you want.

NOTE:  It is not recommended to have more aliases names as the developer has to remember all those aliases names.keep as low as possible but it is upon to you only how many aliases you want.

Thank you so many guys for reading my post. if you're interested there are other posts which are on Angular, UI style guides, typescript style guides, etc;