> For the complete documentation index, see [llms.txt](https://bitforce.gitbook.io/the-anatomy-of-an-angular-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bitforce.gitbook.io/the-anatomy-of-an-angular-app/setup-typescript-alias.md).

# Setup typescript alias and barrels

Typescript alias are very useful to avoid importing modules like this

```
import { UserService } from '../../services/user.service';
```

with alias we can import like this

```
import { UserService } from '@services';
```

## How to add an alias

In `tsconfig.ts` you can add ad many alias you need eg:

```
{
  compilerOptions: {
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"],
      "@assets/*": ["assets/*"],
      "@shared/*": ["app/shared/*"],
      "@models/*": ["app/models/*"],
      "@services/*": ["app/services/*"],
      "@constants": ["app/constants/constants.ts"],
      "@carbon-design/*": ["app/shared/carbon-design/*"]
    }
  }
}
```

## Barrels

Barrels are an handy way to export multiple modules from one module / file that will work like proxy eg:

you have some services:

`app/services/service-one.service.ts`  \
`app/services/service-two.service.ts`

instead of importing like this, specifing the exact filename and using multiple lines of code

```
import { ServiceOne } from '@services/service-one.service';
import { ServiceTwo } from '@services/service-two.service';
```

we can define a barrel in eg `app/services/index.ts` with this content

```
export * from './service-one';
export * from './service-two';
```

and then we can import (using the alias too) like this (a lot faster and clear)

```
import { ServiceOne, ServiceTwo } from '@services/index';
```