Parameters for importing modules in Angular2 (TS)

Question

I know some progress, or at least plans ( # 5093 , # 5728 ) to improve the display of the paths to the typescript module, but I was wondering what parameters we have at the moment (Angular2 beta.1, typescript 1.7, VS Code 0.10.5, nodejs 5.4, systemjs 0.19).

To make everyone happy (compiler, editor and browser), I use the 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 the following options

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

I would like to use import without all these points:

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

as it becomes pretty ugly, crazy for tracking and a nightmare for moving modules around. It works in the browser due to systemjs configuration:

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

and I can "trick" the compiler by adding "isolatedModules": true in tsconfig.json (without which it throws an error), but in Visual Studio Code the Cannot find module error persists, and I lose the code hint. I heard that there are some solutions with type in the node_modules folder, but no working examples could be found.

Does anyone know how to set it all up so that they work together?

Thanks.

Answer 1

To keep track of future visitors, this should be fixed in TypeScript 2.0. The configuration you are looking for is to set the baseUrl or paths properties in tsconfig.json . If you unconditionally want to map everything to a path in scripts , use something like:

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

If it is only the core and app that you want to use specifically, use

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