Set path alias in angular 4 application

Question

Is there any way to set path aliases in Angular with TypeScript since putting path like

import { AuthService } from '../../../common/AuthService';
import { ContactService } from '../../../common/ContactService';

It is very confusing i.e. to remember the relative path URI. Is there any way to create path aliases and use them throughout the application, like browserify?

Answer 1

If you use typescript, the best way to deal with this problem is to put paths configuration in project's tsconfig.json:

"baseUrl": "src",
"paths": {
  "@app/*": ["app/*"],
  "@env/*": ["environments/*"]
}

Please, refer 2nd point in the following article https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81, or official ts docs https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url