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

I know setting up tsconfig aliases is a big win, but refactoring all those existing imports can feel like a huge chore. That’s exactly why I built replace-imports-cli! 🚀

Let a Tool Do the Heavy Lifting - replace-imports-cli

This little tool does the hard work for you. It scans your project, finds all those long relative import paths, and replaces them with the clean aliases you’ve defined in your tsconfig.json. No more manual fixes. No more guesswork!

Just run the tool, and it takes care of the rest. In seconds, your imports go from messy to clean and professional.

Want to give it a try? Head over to the GitHub repo for all the details:

👉 replace-imports-cli on GitHub

By combining tsconfig aliases with this CLI tool, you’ll never have to deal with messy relative paths again. Cleaner imports, faster refactoring, and more time to focus on what really matters! 😊

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. 🙌