Importing modules from deeply nested directory structures

Question

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 1

You can copy a pattern that is implemented by the angular-cli by exporting every component you want available elsewhere through an index.ts at the directory level. This way you can expose nested components at a higher level.

Here's an example:

parent
├── child
│   ├── child.component.ts
│   └── index.ts
├── parent.component.ts
└── index.ts

Inside child/index.ts simply export relevant components.

export { ChildComponent } from './child.component';

Then parent/index.ts can continue the export chain.

export { ParentComponent } from './parent.component';
export { ChildComponent } from './child';

NOTE: Notice how the above is not referencing the child.component file, but the child directory instead!

The child directory's index.ts surfaces these components via the exports in index.ts. This can be done for however deeply nested your components are.

Lastly, if another component outside of parent/ wanted to consume anything inside of parent/, it could be referenced easily at the topmost level.

import { ParentComponent, ChildComponent } from './parent';

Answer 2

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.