Zorthgo Zorthgo - 10 months ago 54
TypeScript Question

Angular 2 importing module without having to traverse e.g. '../../../../../../../Services/'

Importing a module that is not in or around the same folder is quite a nuisance. You have to keep counting the '../'. Like in the example below:

import {AnswersService, AddAnswerModel, Answer} from '../../../../../../../BackendServices/AnswersService';

By modifying my System.config to the example below, I can get around having all of these '../' and the code works perfectly on the browser.

packages: {
'app': { defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
paths: {
'rxjs/*': 'node_modules/rxjs/*',
'BackendServices/*': 'app/BackendServices/*'

It reduces the import statement to the manageable command below.

import {AnswersService, AddAnswerModel, Answer} from 'BackendServices/AnswersService';

But the problem with this approach is that I lose intellisense in Visual Studio Code. I am not sure if this is a typescript problem, a visual studio code problem, or something else.

Does anyone know how to get this working without losing intellisense?


Visual Studio can only resolve relative paths and modules located in node_modules like angular2/* or rxjs/*.

It is the TypeScript default moduleResolution ( node ) .. you can change it in tsconfig.json with 'classic' .. but VS Code will no longer recognize node modules.

The problem is discussed in this ticket https://github.com/Microsoft/TypeScript/issues/5039

There are many proposals .. but nothing is implemented yet.