Задача: давайте создадим глубоко вложенный компонент в Angular и сервис, который будет работать с ним. Пример:

ng g component shared/com/core/components/utils/service

Когда у вас есть большой проект Angular с глубоко вложенными файлами и папками, это приводит к операторам импорта, которые выглядят следующим образом…

import { CoreService } from '../../../../../core.service';

Решение — конфигурация TypeScript

Мы можем сделать это возможным, настроив TypeScript на использование пользовательских пространств имен для указания на определенные пути.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@services": [
        "../../../../../service"
      ]
    },
    ...
}

Затем вы можете указать на любой каталог в вашем проекте и дать ему собственное пространство имен. Любое имя будет работать, но следите за конфликтами имен с существующими пакетами узлов, т. е. @angular, @ngrx и т. д. Конечный результат выглядит так…

import { CoreService } from '@services/core.service';

Ничего особенного, но это один из моих любимых инструментов повышения производительности в Angular. Дайте мне знать, что вы думаете, в комментариях или через Slack.

Предпочтения:



Как мне настроить Angular 5 для поддержки псевдонимов модулей?
Спасибо за ответ на Stack Overflow! Пожалуйста, обязательно ответьте на вопрос. Предоставьте подробности и поделитесь…stackoverflow.com





Сокращение импорта TypeScript в проекте Angular
Эпизод 79, написанный Джеффом Делани. В этом уроке я покажу вам, как использовать сопоставление путей TypeScript для импорта… angularfirebase.com