Первый технический пост, ура!

Писать код на 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.