Импорт модулей из глубоко вложенных структур каталогов

Импортирование модуля, который не находится в той или иной папке или рядом с ней, довольно неприятен. Вы должны продолжать подсчитывать "../". Как в примере ниже:

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

Изменив мой System.config в приведенном ниже примере, я могу обойтись со всеми этими "../", и код отлично работает в браузере.

System.config({
        packages: { 
            'app': { defaultExtension: 'js' },
            'rxjs': { defaultExtension: 'js' }
        },
        paths: {
            'rxjs/*': 'node_modules/rxjs/*',
            'BackendServices/*': 'app/BackendServices/*'
        }
    });

Он сводит оператор import к управляемой команде ниже.

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

Но проблема с этим подходом заключается в том, что я теряю intellisense в коде Visual Studio. Я не уверен, что это проблема typescript, проблема с визуальным кодом студии или что-то еще.

Кто-нибудь знает, как заставить это работать, не теряя intellisense?

Ответы

Ответ 1

Visual Studio может разрешать только относительные пути и модули, расположенные в node_modules, например angular2/* или rxjs/*.

Это модуль TypeScript defaultResolution (node).. вы можете изменить его в tsconfig.json с помощью 'classic'.., но VS Code больше не будет распознавать модули node.

Проблема обсуждается в этом билете https://github.com/Microsoft/TypeScript/issues/5039

Есть много предложений... но пока ничего не реализовано.

Ответ 2

Вы можете скопировать шаблон, который реализуется angular-cli, экспортируя каждый компонент, который вы хотите получить в другом месте, через index.ts на уровне каталога. Таким образом, вы можете выставить вложенные компоненты на более высокий уровень.

Вот пример:

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

Внутри child/index.ts просто экспортировать соответствующие компоненты.

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

Тогда parent/index.ts может продолжить цепочку экспорта.

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

ПРИМЕЧАНИЕ. Обратите внимание, что это не относится к файлу child.component, но к каталогу child !

Каталог child index.ts покрывает эти компоненты через экспорт в index.ts. Это может быть сделано для любых глубоко вложенных ваших компонентов.

Наконец, если другой компонент вне parent/ хочет потреблять что-либо внутри parent/, на нем можно легко ссылаться на самом верхнем уровне.

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