Angular2 - относительный импорт корней

У меня проблема с импортом в angular2/typescript. Я хотел бы использовать импорт с некоторым корнем, например, "app/components/calendar", вместо этого способ, который я могу использовать, это что-то вроде:

//app/views/order/order-view.ts
import {Calendar} from '../../components/calendar

где Календарь определен как:

//app/components/calendar.ts
export class Calendar {
}

и это, очевидно, становится намного хуже, чем ниже в иерархии, тем более глубокой является "../../..", но она все еще очень плохая и хрупкая. Есть ли способ использования путей относительно корня проекта?

Я работаю в Visual Studio, и относительный импорт - это единственное, что делает VS способным распознавать эти imports.y

Ответы

Ответ 1

Короткий ответ

Установите для compilerOption "moduleResolution" значение "classic".

Длинный ответ

Используете ли вы tsconfig.json? Я полагаю, вы. Я искал способ сделать такие выражения, как import someModule = require ("../../../../someModule", в import someModule=require("src/path/to/someModule"). Я обнаружил, что после того, как часы тратятся впустую, tsc может использовать разные алгоритмы для разрешения модуля. Я использую атом, и он создает tsconfig.json с свойством compilerOption moduleResolution, установленным на "node", и использует алгоритм разрешения модуля shitty (excuse my french) node. Я просто положил "классику" и начал работать очевидным образом.

** ОБНОВЛЕНИЕ **

Просто не используйте это решение. Embrace node алгоритм разрешения модулей. Сообщество опирается на него, поэтому все будет разваливаться, если вы попытаетесь сделать иначе. Используйте псевдонимы или некоторые другие предоставленные решения.

Ответ 2

Ответ

Как и в TypeScript 2.0, вы можете установить свойства tsconfig.json baseUrl следующим образом:

{
  "compilerOptions": {
    "baseUrl": "app"
}

Затем вы можете использовать желаемый способ импорта компонентов, например: 

import { Calendar } from 'components/calendar';

Приложение

Разрешение обратных путей

Важным соображением является то, что указание опции baseUrl вызывает компилятор TypeScript:

  • Посмотрите путь по отношению к baseUrl
  • В случае неудачного разрешения (модуль не найден) найдите путь относительно опции moduleResolution

SystemJS

Так как SystemJS сильно используется в стадии разработки Angular, обязательно также config также systemjs.config.js, чтобы он правильно разрешал пути.

Источник и дальнейшая информация: https://github.com/Microsoft/TypeScript/issues/5039

Ответ 3

Один из способов - иметь файлы, которые экспортируют и связывают файлы с более коротким путем.

У вас может быть папка components.ts в корне вашего приложения.

export {Calendar} from './components/calendar'
export {*} from './components/map'

И импортируя его из компонентов

import {Calendar, Map} from '../../components';

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

Альтернативой было бы отказаться от использования операторов импорта и вместо этого использовать внутренние модули.

calendar.ts

module Components {
    export class Calendar {}
}

И вы сможете просто использовать его в любом из файлов ваших проектов, подобных этому.

new Components.Calendar();

Или импортируйте его с псевдонимом.

import Calendar = Components.Calendar;
new Calendar();