Ярлык импорта Angular2

Я разрабатываю приложение, используя angular 2 и webpack. Мне было интересно, есть ли способ сделать ярлыки для импорта? Я имею в виду, что иногда мне нужно импортировать компоненты из папок, которые находятся вверху в иерархии, поэтому в итоге я делаю что-то вроде этого.

import { UserComponent } from '../../../models/users/user.ts';

В идеале просто хочу сделать:

import {UserComponent} from '@models/users/user.ts';

или что-то еще короче. Есть ли способ создать ярлыки?

благодарю вас


angular typescript1.8
person Miguel Rosales    schedule 24.08.2016    source источник
comment
Возможный дубликат Как настроить `baseUrl` для компилятора машинописного текста?   -  person Estus Flask    schedule 24.08.2016
comment
baseUrl — это все, что есть у TS. Использование любого препроцессора для создания ярлыков приведет к потере поддержки со стороны IDE, а это последнее, чего обычно хочется.   -  person Estus Flask    schedule 24.08.2016

Ответы (1)


arrow_upward
7
arrow_downward

Я знаю, что этому вопросу много-много лет, и у нас есть Angular 7, но если у кого-то возникнет такой же вопрос, вот ответ.

Вы можете настроить сопоставление путей в файле tsconfig.json.

Например: Учитывая, что у нас есть следующая структура папок:

├── app
│   ├── app.component.html
│   ├── app.module.ts
│   ├── ...
│   └── shared
│       └── material
│           └── material.module.ts
...
...

Я хотел бы добавить "ярлык" к папке shared. Поэтому я добавляю "@shared/*": ["app/shared/*"] в compilerOptions файла tsconfig.json.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@shared/*": ["app/shared/*"]
    },
   // ... and so on

Теперь я могу импортировать свой общий модуль следующим образом:

import { MaterialModule } from '@shared/material/material.module';

Надеюсь, это поможет кому-то.

Подробности можно найти в документации Typescript.

person BooFar    schedule 20.01.2019