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:

	{
	"compileOnSave": false,
	"compilerOptions": {
	"importHelpers": true,
	"outDir": "./dist/out-tsc",
	"sourceMap": true,
	"declaration": false,
	"moduleResolution": "node",
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"target": "es5",
	"lib": [
	"es2017",
	"dom"
	],
	"types": [],
	"baseUrl": "src",
	"paths": {
	"models/*": [ "app/shared/models/*" ],
	"services/*": [ "app/services/*" ]
	}
	}
	}

view raw tsconfig.json hosted with ❤ by GitHub