Как избежать импорта с очень длинными относительными путями в Angular 2?

Как я могу ввести что-то вроде 'my-app-name/services' чтобы избежать таких строк импорт?

import {XyService} from '../../../services/validation/xy.service';
2 75
angularjs typescript ecmascript-6 angular2-services

2 ответа:

TypeScript 2.0+

в TypeScript 2.0 вы можете добавить baseUrl в собственность tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

затем вы можете импортировать все, как если бы Вы были в директории:

import {XyService} from "services/validation/xy.service";

кроме того, вы можете добавить paths свойство, которое позволяет сопоставить шаблон, а затем отобразить его. Например:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

что позволит вам импортировать его из любого места, как это:

import {XyService} from "services/xy.service";

оттуда, вам нужно будет настройте любой загрузчик модулей, который вы используете для поддержки этих имен импорта. Прямо сейчас компилятор TypeScript, похоже, не отображает их автоматически.

вы можете прочитать больше об этом в выпуск github. Существует также rootDirs свойство, которое полезно при использовании нескольких проектов.

Pre TypeScript 2.0 (по-прежнему применяется в TS 2.0+)

Я нашел, что это можно сделать проще с помощью "бочках".

  1. в каждой папке, создать .
  2. в этих файлах, повторно экспортировать каждый файл в папке.

пример

в вашем случае, сначала создайте файл с именем my-app-name/services/validation/index.ts. В этом файле есть код:

export * from "./xy.service";

затем создайте файл с именем my-app-name/services/index.ts и этот код:

export * from "./validation";

теперь вы можете использовать свой сервис так (index is подразумевается):

import {XyService} from "../../../services";

и если у вас есть несколько файлов там становится еще проще:

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

того, чтобы сохранить эти дополнительные файлы немного больше работы авансом (работа может быть устранена с помощью ствол-хранитель), но я обнаружил, что это окупается в конце концов с меньшей работой. Это намного проще сделать основные изменения структуры каталогов, и это сокращает количество импорта вы должны делать.

осторожностью

при этом есть несколько вещей, которые вы должны смотреть и не могу:

  1. вы должны следить за круговым реэкспортом. Поэтому, если файлы в двух подпапках ссылаются друг на друга, вам нужно будет использовать полный путь.
  2. вы не должны возвращаться в папку из той же исходной папки (например. находясь в файле в папке проверки и делая import {XyService} from "../validation";). Я нашел это и первый пункт может привести к ошибкам импорта не определяясь.
  3. наконец, вы не можете иметь два экспорта в папке с таким же именем. Обычно это не проблема.
117

лучше использовать ниже конфигурации в tsconfig.json

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

для вашего случая, используйте смогите сделать import {XyService} from '@app/services/validation/xy.service' или любой уровень пути, который вы можете настроить.

4