Zorthgo Zorthgo - 3 months ago 20
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.

System.config({
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?

Answer

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.

Comments