TypeScript: how to NOT use relative paths to import classes?

Question

I am currently working on an Electron app using TypeScript and Angular2, for which I have created many different classes, all in separate files. In order to make the refactoring of my app easier, I would like to not have to use the relative path when importing those classes.
Right now, to import them, I use this syntax: import {Trigger} from './../../trigger/ts/trigger.component';
What I would like to do is use a syntax that looks like this: import {Trigger} from 'trigger.component';
Is that possible?

Answer 1

Better to use below configuration in tsconfig.json

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@trigger/*": ["app/trigger/ts/*"]
    }
  }
}

For your case, use can do either import {Trigger} from '@app/trigger/ts/trigger.component'; or import {Trigger} from '@trigger/trigger.component'; or any level of path you can configure.

Answer 2

You can create one file, for example: components.ts and in that component reference to all components, like:

export {Trigger} from '../trigger/ts/trigger.component'
export {Cmp} from '../cmp/ts/cmp.component'
...

Than, when you want to load one component, you can do:

import {Trigger} from '../components.ts'

It is good practice for grouping things.