Path aliases with TypeScript in Node.js
Tags: node, showdev, typescript, javascript
Published: 2019-02-06 20:57:27

---
title: Path aliases with TypeScript in Node.js
published: true
description: Including path aliases in a TS Node.js project
tags: node, showdev, typescript, javascript
---

This post was originally published on my [blog](https://larswaechter.dev/blog/nodejs-ts-path-aliases/).

---

Some days ago I included path aliases in my TypeScript Node.js projects. Since they make the code look much cleaner in my opinion I like to show you how to setup these in a project.

## The problem
In Node.js (or TS/JS in general) you can import single modules into your code.
This might look the following:


```javascript
import { User } from '../../user/model';
import { Article } from '../../article/model';

import { Cache } from '../../../../cache';
import { MongoDB } from '../../../../mongodb';
```
Noticed these dots ('../') to access upper modules?

The problem we have here is that the deeper your project tree is the more '../' are required to access modules in higher layers. Actually, this doesn't look very beautiful to be honest. Fortunately we can change that.

The solution: **path aliases**

## What are path aliases?
In TypeScript you can avoid these "bad" looking imports with the help of path aliases. With path aliases you can declare aliases that map to a certain absolute path in your application.

Here a quick example:

```javascript
import { User } from '@modules/user/model';
import { Article } from '@modules/article/model';

import { Cache } from '@services/cache';
import { MongoDB } from '@services/mongodb';
```

In this case our two aliases are
- @modules that maps to './src/rest/modules'
- @services that maps to './src/services'

## Setup
Let's get into it and setup some path aliases. Note that I won't explain how to setup a TypeScript project in Node.js. I assume that you did this already.

Imagine we have the following project structure:
```
folder structure
└───src
   │
   └───rest
   │   │
   │   └───modules
   │   │   │
   │   │   └───article
   │   │   │
   │   │   └───user
   │   │
   │   │   server.ts
   │
   │
   └───services
   │   │    cache.ts
   │   │    mongodb.ts
   │    
   │   index.ts
```

### Step 1: Update tsconfig.json
First of all, we have to declare the path aliases in our tsconfig file

```json
"baseUrl": "./src",
"paths": {
    "@modules/*": ["rest/modules/*"],
    "@services/*": ["services/*"]
}
```

Now, you can use the new path aliases for module imports in your application. There occur any errors in your IDE (in my case VSC) or when you compile the code.

However, we are not done yet. When you try compile the TS code into JS you won't see any errors. But as soon as you run your compiled JS code you will get an error: 

For example:
```
Error: Cannot find module '@modules/user'
```

That's because JS can't resolve the modules for the declared path aliases.

### Step 2: Install module-alias package
Next, we'll install an npm package called [module-alias](https://www.npmjs.com/package/module-alias)

```
npm i --save module-alias
```

This module registers the path aliases in the compiled JS files. Therefor we need to make some changes to our package.json:

```json
"_moduleAliases": {
    "@modules": "dist/rest/modules",
    "@services": "dist/services"
  }
```

Note that 'dist' is the folder where the compiled JS files are located.

Last but not least we have to register the path aliases in our application.
Add the following line at the top of your startup file:

```javascript
import 'module-alias/register';
```

Finally, when you compile and execute the code you shouldn't see any import errors.

[Here] (https://github.com/Aionic-Apps/aionic-core/tree/master) you can find some examples for path aliases in a side project I'm currently working on.