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

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

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

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. В каждой папке создайте index.ts файл.
2. В этих файлах повторно экспортируйте каждый файл в папке.

пример

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

export * from "./xy.service";

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

export * from "./validation";

Теперь вы можете использовать свой сервис следующим образом ( indexподразумевается):

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

А когда у вас есть несколько файлов, становится еще проще:

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

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

Осторожно

При этом есть несколько вещей, на которые нужно обратить внимание, но которые нельзя делать:

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

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

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

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

Традиционный способ до Angular 6:

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

следует реорганизовать в эти:

import {XyService} from '@app/services/validation/xy.service

Коротко и мило!

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

Я столкнулся с этим только потому, что то, что я делал долгое время, перестало работать, и мне было интересно, изменилось ли что-то в Angular 7. Нет, это был просто мой собственный код.

Несмотря на это, мне пришлось изменить только одну строку, tsconfig.jsonчтобы избежать длинных путей импорта.

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

   "baseUrl": "src"
  }
}

Пример:

// before:
import {XyService} from '../../../services/validation/xy.service';

// after:
import { XyService } from 'app/services/validation/xy.service';

Это работало для меня в значительной степени с тех пор, как появился Angular-CLI.