Первый технический пост, ура!
Писать код на Angular с помощью Visual Studio Code — сплошное удовольствие: подсветка синтаксиса, автодополнение, интеграция с git, автоматический импорт и т. д., но время от времени вы находите странные пути в импорте, которые можно улучшить с помощью файла tsconfig.json.
Давайте представим, что вы хотите импортировать компонент, который находится далеко в структуре папок, вы закончите что-то вроде:
@import "../../../../../modules/shared/components/date-time/date-time.component";
Если вы используете абсолютный путь, результат немного лучше:
@import "src/app/modules/shared/components/date-time/date-time.component"
Теперь TypeScript предоставляет решение: внутри файла tsconfig.json у вас есть опция «путь», которая позволяет объявлять «псевдонимы пути», таким образом, вы можете значительно сократить их. Маршрут, указанный внутри пути, относится к конфигурации baseUrl того же файла.
{
"compilerOptions": {
..
"baseUrl": "src",
"paths": [
"@shared-module/*": [
"app/modules/shared/*"
],
]
}
}
Отныне в ваших компонентах вы можете импортировать файлы из общих модулей следующим образом:
@import "@shared-module/components/date-time/date-time.component"
Последнее замечание: эта функция зависит от вашего инструмента сборки, вам может потребоваться изменить ее. Например, в webpack 2 вам нужно будет добавить новый путь к массиву псевдонимов разрешения в файле webpack.config.js:
alias: {
'@shared-module': gpath.resolve(\_\_dirname, `../src/app/modules/shared`),
}
Первоначально опубликовано на сайте frontpills.com.