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

Ответ 1

TypeScript 2. 0+

В машинописном 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. Наконец, вы не можете иметь два экспорта в подпапке с одинаковым именем. Обычно это не проблема, хотя.

Ответ 2

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

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

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

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

Ответ 3

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

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

В любом случае мне нужно было всего лишь изменить одну строку в tsconfig.json чтобы избежать длинных путей импорта.

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

   "baseUrl": "src"
  }
}

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