Angular2 - root relative imports

Answer

As of TypeScript 2.0 you can set tsconfig.json properties baseUrl as following:

{
  "compilerOptions": {
    "baseUrl": "app"
}

Then, you might use your desired manner of importing components, like:

import { Calendar } from 'components/calendar';

Appendix

Fallback paths resolution

An important consideration is that specifying baseUrl option causes TypeScript compilator to:

  1. Look up a path with regards to baseUrl
  2. On failed resolution (module not found), look up a path with regards to moduleResolution option

SystemJS

Since SystemJS is heavily used in Angular development stage, be sure to accordingly config also systemjs.config.js, so that it resolves paths correctly.


Source and further details: https://github.com/Microsoft/TypeScript/issues/5039


UPDATE

Just don't use this solution. Embrace node module resolution algorithm. Community rests on it, so everything will break apart if you try to do otherwise. Use aliases or some of the other provided solutions.

Short answer There's a way but you shouldn't do it. Set the compilerOption "moduleResolution" to "classic".

Long answer

Are you using tsconfig.json? I assume you are. I've been looking a way to make statements such as import someModule = require ("../../../../someModule" into import someModule=require("src/path/to/someModule"). I found after hours wasted that tsc may use different algorithms for module resolution. I'm using atom and it creates the tsconfig.json with the compilerOption property moduleResolution set to "node" and it uses the shitty (excuse my french) module resolution algorithm of node. I just put "classic" and started working the obvious way.