Say Goodbye to Long Relative Paths with tsconfig Aliases

Let’s be real - working with long relative paths can be a pain. Who hasn’t had to deal with something like this?

import { AuthService } from '../../../services/auth.service';  

It’s messy, hard to read, and even harder to manage when your app grows. But here’s the good news: there’s a way to ditch those long paths and keep your code clean and readable. Enter tsconfig aliases! 🎉

---

What Are Aliases, and Why Should You Care?

With tsconfig aliases, you can replace those clunky relative paths with short, clean ones that look like below:

import { AuthService } from '@services/auth.service';  

No more counting ../ or getting lost in nested directories. Aliases make your imports:

• Readable: Short paths are easier to read and understand.
• Maintainable: Move files around without breaking half your imports.
• Scalable: As your project grows, your import statements stay clean.

---

Setting Up Aliases in Angular

Adding aliases is quick and easy.

Step 1: Update tsconfig.json

In your tsconfig.json, go to compilerOptions and set a baseUrl to point to your src directory. Then, add a paths section to define your aliases:

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

In this setup:

• @auth/* maps to src/app/auth/*.
• @users/* maps to src/app/users/*.
• @products/* maps to src/app/products/*.

---

Step 2: Update Your Imports

Now, instead of this:

import { AuthService } from '../../../auth/auth.service';  

You can use this:

import { AuthService } from '@services/auth.service';  

Much cleaner, right?

---

Step 3: Refactor Existing Imports (Optional)

If you already have a bunch of long paths in your app, use your editor’s Find and Replace feature or refactoring tools to update them. Most modern IDEs, like VS Code or WebStorm, can help you automate this.

---

Bonus: Cleaner Lazy Loading

You can even use aliases for e.g. lazy loading Angular modules:

const routes: Routes = [  
  {  
    path: 'users',  
    loadChildren: () => import('@users/user.routes').then(r => r.userRoutes)
  }  
];

This makes your routes more readable and keeps things consistent.

---

Why This Matters

Switching to tsconfig aliases isn’t just about making your code look nicer (though that’s a big plus!). It also:

• Saves time when refactoring - Moving files doesn’t mean endless fixes to import paths.
• Makes onboarding new team members easier—they’ll instantly understand where imports are coming from.
• Makes it easier to trace where entities are used, helping you identify and prevent potential circular dependency issues.
• Helps your project scale without creating a tangled web of relative paths.

---

Works in Any TypeScript Project

Aliases aren’t limited to any framework - they work anywhere you’re using TypeScript. From React, Angular, Vue to Node, NestJS etc., you can enjoy clean, readable imports across all your projects.

Ready to Clean Things Up?

Take a few minutes to set up aliases in your Angular app, and you’ll never want to go back to those long relative paths. Trust me, your future self will thank you. 🙌