How to set up imports path aliases for (Angular)

Angular components name becomes unreadable also non maintainable for larger project. Usually we use relative paths to import components like this ("../../../something"), which is not suitable for project that has many nested routes.

import { JobInformationService } from '../../../services/job-information.service';
import { ControlBarComponent } from '../../components/control-bar/control-bar.component';

We can solve this problem by defining path aliases, we can configure this in tsconfig.json file in the root directory.

In the compilerOptions section we can add two things
add this line:

 "baseUrl": "./src",

then also add these, here choose the path and name based on your projects requirement. You can add as many as you want.

"paths": {
      "@components/*" : ["app/components/*"],
      "@pages/*" : ["app/pages/*"],
    }

Add this to your tsconfig.json file

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*" : ["app/components/*"],
      "@pages/*" : ["app/pages/*"],
    }
  },

Now you can import your components, services, etc. directly using @definedname , for example you can now use like this

import { JobInformationService } from '@services/job-information.service';
import { ControlBarComponent } from '@components/control-bar/control-bar.component';

Comments

[Gaurav Chandra]

this is a good clean format but do we really need this though? with all the modern IDEs, imports are automatically taken care of. It would be better that the angular team enables this by default instead of the devs to configure this.

but yes, I agree it is easy on the eyes.

[Abdullah Al-Mamun]

I definitely agree with you. This is for someone who really need this to implement on their codebase. As you know, some auto imports are horrible

And it will be amazing if the core team take care of these small things.