Options for importing modules in Angular2 (TS)

Question

I know there's some progress or at least plans (#5093, #5728) to improve typescript's module paths mapping, but I was wondering what are our options at this moment (Angular2 beta.1, TypeScript 1.7, VS Code 0.10.5, nodejs 5.4, systemjs 0.19).

In order to make everyone happy (compiler, editor and browser) I'm using following syntax to import modules:

// C:/~somepath~/project_name/src/scripts/app/components/search/search.component.ts
import {Component} from 'angular2/core';
import {EmitterService} from '../../../core/services/emitter/emitter.service';
import {SearchService} from '../../../app/services/search/search.service';

which compiles to

System.register(['angular2/core', '../../../core/services/emitter/emitter.service'], function(exports_1) {

when I use following options

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node"
    ...
  }  
}

I'd like to use imports without all those dots:

import {EmitterService} from 'core/services/emitter/emitter.service';

since it's getting pretty ugly, crazy to track and a nightmare to move modules around. It works in a browser because of the systemjs configuration:

// system.conf.js
System.config({
  map: {
    app: "/scripts/app",
    core: "/scripts/core",
  }
}

and I can "trick" the compiler by adding "isolatedModules": true to tsconfig.json (without this it throws an error), but in Visual Studio Code the Cannot find module error persists and I lose code-hinting. I heard there are some solutions with typings in node_modules folder, but wasn't able to find any working examples.

Anyone knows a way to configure the all these to work together gracefully?

Thanks.

Answer 1

Just to follow up to future visitors, this should be fixed in TypeScript 2.0. The configuration that you're looking for is to set the baseUrl or paths properties in your tsconfig.json. If you unconditionally want to match everything to some path in scripts, use something like:

{
    "baseUrl": "./src/scripts"
}

If it's only core and app that you want to use specially, use

{
    "baseUrl": "./src/scripts",
    "paths": {
        "app/*": ["app/*"],
        "core/*": ["core/*"]
    }
}