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

Short typescript 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.
Подписаться на блог по эл. почте
         
  
Метки: