Как сделать короткие imports в Angular

Если в вашем проекте imports пути выглядят громоздкими и вам это не нравится, их очень легко можно укоротить и сделать удобочитаемыми.

Пример о чем речь:
import { ExportService } from '../../../services/export.service';
превратится в:
import { ExportService } from '@services/export.service';

В статье я расскажу, как настроить IDE, импорты в компонентах и импорты в файлах стилях.

Настройка IDE

Прежде всего нам нужно настроить IDE или редактор кода, чтобы работал авто-импорт и при неправильном пути IDE подсвечивал ошибочный путь импорта.

WebStorm — красавчик, и там уже делать ничего не нужно. Он сам разберется и если есть шорткаты для путей, он будет использовать их.

Для VsCode нужно в настройках прописать одну строку:

{
    ...
    "typescript.preferences.importModuleSpecifier": "non-relative"
}

Все, это единственные изменения. Теперь vs code intellisense работает, а ошибки подсвечиваются.

Настройка TypeScript для коротких imports

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

Также обязательно нужно обратить внимание на baseUrl. По умолчанию в angular проекте прописан ./, а для шорткатов необходимо прописать ./src. Все пути в шорткатах должны быть указаны относительно базовой папки src.

Еще нужно проверить tsconfig.app.json, внутри него могут быть прописаны так же пути. Если это так, то их нужно перенести в tsconfig, чтобы ваши новосозданные шорткаты не перезаписывались.

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

Настройка коротких импортов в LESS/SCSS

Со стилями к сожалению шорткаты тайпскрипта работать не будут, но если же у вас есть длинные относительные импорты, то их можно будет сократить указав базовую папку вашей темы, в которую вы можете складывать less файлы, которые импортируются в различные компоненты. Предположим такую папку мы назовем theme и находится она будет в src.

Для такой папки нужно будет добавить в angular.json один конфиг:

"options": {
    "styles": [
        ...
    ],
    "stylePreprocessorOptions": {
         "includePaths": ["src/theme"]
    },
    ...
}

С такой настройкой вы сможете импортировать файлы из этой папки в любом компоненте так, как будто ваш компонент лежит в папке src/theme.

Пример для файла стилей компонента:

@import '../../../theme/colors';
превратится в:
@import 'colors';

Теперь у вас в Angular проекте короткие и удобочитаемые imports, которые не нужно обновлять, если вы вдруг перенесете компонент в другую папку.

Подписывайтесь

Для получения уведомлений о новых публикациях подписывайтесь на мой блог или страницы в соц. сетях: Twitter, Facebook. Также у меня есть канал в Telegram (@golosay_net), в котором я чаще всего публикую что-нибудь интересное про Front-End.