1

For what keyword should I look to learn how to configure my Angular app to be able to load my internal modules with following:

import { MyModule } from 'cool/short/path';

instead of:

import { MyModule } from './../../../modules/MyModle/my-module';

I went through some tutorial mentioning how to configure whole app to use some kind of absolute path marking, but is it possible to configure single module in such manner? As a notable example I'd mention Angular modules, which are always referred with @ and same path from whatever project location.

Igor Soloydenko
  • 11,067
  • 11
  • 47
  • 90
Tomas
  • 3,269
  • 3
  • 29
  • 48
  • If you are using TypeScript 2.0+ there is a good answer here : https://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2 – M.Mansoury Oct 11 '17 at 06:07

2 Answers2

3

I think, what you're asking is a property of TypeScript compiler options. Look at this document describing baseUrl.

Since we're talking about import ... instruction, it's unrelated to Angular. You'll need to set it in your tsconfig.json file.

Your "non-relative paths" (those without ..) will be resolved starting the baseUrl. So, technically, they are still relative. The difference is instead of being relative to the current file, they will be relative to the directory you specified. You will still be able to use ..-based imports if you want. You can even mix the import styles within the same file...

Igor Soloydenko
  • 11,067
  • 11
  • 47
  • 90
  • Yeah, I know this feature is not related to Angular itself, Angular is just an example here :) Thank you for help – Tomas Oct 11 '17 at 06:39
0

OP here again, I'd like to mention one important gotcha in "non-relative paths". As Igor Soloydenko answer mentions tsconfig.json file, for myself it worked correctly after modifying tsconfig.app.json file, which in fact extends base tsconfig.json, but even though only working from app file level my changes were effective.

Tomas
  • 3,269
  • 3
  • 29
  • 48