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.

[Duong Hoang Nam]

When I'm using extension at VSCode IDE: Angular Language Service. Its can make me import components from Angular template HTML. But the result i received like this below:

I really want the path import auto transform format

import { ButtonComponent } from '~shared/components/button/button.component';

Even though, I have configured at tsconfig.json file like this below:

`"baseUrl": "./src",
"paths": {
  "~core/*": ["app/core/*"],
  "~features/*": ["app/features/*"],
  "~shared/*": ["app/shared/*"]
}`

If I import components manually from component.ts file like this below:

, that is the result i want.

In short: How can import the path aliases from file Angular HTML Template?

I would greatly appreciate any advice or guidance on how to resolve this issue. I’ve tried numerous solutions I found online, but none have given me the results I’m looking for. If anyone has encountered this problem before or knows how to fix it, your help would be invaluable. Thank you in advance for your support—I’m eager to learn and resolve this problem!