Shorter import paths in Angular

Imports in Angular applications can get messy, particularly in ones that have a very nested structure. While a nested project directory structure has many benefits that make it much better than a flat structure, relative and/or absolute import paths in such cases can be agonizingly long. For instance, consider the following project directory.

The Problem

Neat, wouldn’t you say? Now consider that you wish to import and inject the SharedService exported out of them shared.service.ts into the AdminDashboardComponent in admin-dashboard.component.ts. The import statement would look something like this:

import { SharedService } from ‘../../../shared/services/shared.service’;

In an even bigger and more complicated application, it could have been longer. Granted, our robust text editors, VSCode in my case, mostly takes care of the imports but even if that happens, the code’s readability drops considerably when such long relative paths are included.

And that brings up the question — is there a way to make the imports paths more elegant, and yes, shorter? (Cue the drumrolls…) Yes. There is — and not even a hack but one that’s provided for natively. Let’s find out how.

The Solution

tsconfig.json is a file present in the root of the project directory and critical to every Angular project. As you can figure from the name, and also from its contents, if you have checked it out, this file defines a lot of configurations necessary for the application. And this is where we’ll make the setup for enabling shorter import paths.

What we need to do is add a key called paths into the compilerOptions array. Here, Typescript allows us to define path aliases for use across the project. Behind the scenes, what essentially happens is when the project is compiled, wherever the path aliases defined in the paths array appear in the code, the compiler will replace it with the actual path. The value for paths will be an object containing key-value pairs of actual paths and aliases. Let’s look at the steps using an example.

Consider the very problem we discussed up top(SharedService import). Here’s a way(yes, it’s a way, not THE way) to do it

1. At the root of the shared folder, add a new file called index.ts(feel free to name it anything, so long as it’s a TS file).
2. In index.ts, add the following line
   export { SharedService } from ‘./services/shared.service’;
3. Now, open tsconfig.json and in compilerOptions, add the following line
   “paths”: { “@blog/shared”: [“src/app/shared”] }
4. After this is done, go to admin-dashboard.component.ts and the import can be updated as follows
   import { SharedService } from ‘@blog/shared’;

That’s it! Doesn’t that look much better? Obviously, you can name the path aliases(the keys in paths object) can be anything at all(even the @ in that is a personal choice and not syntax), as long as the values specify the correct absolute paths with respect to the project root directory.

Since we are leveraging a Typescript feature here, this can be done for any Typescript project that follows a modular structure, including but not limited to NestJS projects.

I hope that this story helped you.

Interested in having a 1:1 chat with me over this story, or Angular, Typescript and Javascript in general? Head over to Hire The Author and let’s connect!