Path Mapping

How many times have you opened a file only to be greeted by lines and lines of ugly import statements?

import {something} from '../../../../../shared/shared.service'

Not only are they ugly but they become difficult to maintain.

Imports don’t have to be that long. Typescript has a solution for that called path mapping.

Head to the tsconfig.json file in your project and edit the paths config to provide some aliases for all of your long paths:

"paths": {
"stubs/*": [
"./src/app/stubs/*"
],
"state/*": [
"./src/app/state/*"
],
"shared/*": [
"./src/app/shared/*"
]
}

The above results in a shorter import syntax everywhere in your code:

import {something} from 'shared/shared.service'

instead of

import {something} from '../../../../../shared/shared.service'

Want to know more about path mapping? Head over to the Typescript documentation.