DEV Community

Cover image for How to set up imports path aliases for (Angular)
Abdullah Al-Mamun
Abdullah Al-Mamun

Posted on

How to set up imports path aliases for (Angular)

#angular #typescript #webdev #tutorial

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';
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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/*"],
    }
Enter fullscreen mode Exit fullscreen mode

Add this to your tsconfig.json file 

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

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';
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
gauravchandra profile image
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.

Collapse
 
aamhimel profile image
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.

Collapse
 
namdh03 profile image
Duong Hoang Nam • • Edited

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:

Image description

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/*"]
}`
Enter fullscreen mode Exit fullscreen mode

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

Image description

, 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!

Read next

zemerik profile image

ZemProfiles - v2.0.1 (Prerelease)

Hemang Yadav -

akmeena profile image

12+ Essential Scalability Principles for Your Next Project

Amit kumar Meena -

dinko7 profile image

Adding a "Done" Button to iOS Numpad in Flutter

Dinko Marinac -

longlikun profile image

Nextjs中使用axios实现一个动态的下载/上传进度条

likun -