TypeScript - Switch to absolute paths

By default when you are using TypeScript imports, you are using relative paths. This leads to long combinations of  '../../../../' especially when you have a deeply nested project tree structure. Luckily most IDE’s provide some tooling to help you with these paths.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { SearchResponse } from '../../shared/models/searchResponse';

import { SampleService } from '../../../shared/services/sample/sample.service';

import { SearchRequest } from '../../shared/models/searchRequest;

import { ErrorService } from '../../../shared/services/errorService';

import { LoaderService } from '../../../shared/services/loaderService';

import { TableData } from '../../shared/models/tableData';

By configuring the paths inside your tsconfig file you can switch to:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import { SearchResponse } from 'models/searchResponse';

import { SampleService } from 'services/sample/sample.service';

import { SearchRequest } from 'models/searchRequest;

import { ErrorService } from 'services/errorService';

import { LoaderService } from 'services/loaderService';

import { TableData } from 'models/tableData';

And here is how to achieve this by using the path section inside your tsconfig file: