Use aliases for your imports

In TypeScript projects, especially in Angular, it's easy to have too many files and too many imports in our components. This leads to confusion and errors when importing. In this post we have a quick guide to avoid this.

We've all seen this type of import in our files:

import { Something } from '../../../../../../../something.ts';

You can work around this by using aliases in the tsconfig.json attribute via paths:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@components/*": ["src/app/components/*"],
      "@routes/*": ["src/app/routes/*"],
      "@shared/*": ["src/app/shared/*"],       
    }
  }
}

You can then use these aliases to import your resources:

import { ButtonComponent, CardComponent } from '@components';
import { formatText } from '@shared/utils/formatting';
import { converting } from '@shared/utils/converting';

Conclusion

You should do this for several reasons:

• It is much easier to read than relative paths.

• This is useful for refactoring: if your code changes location, the import stays the same.

• IDEs can import directly from aliases