Angular2 - root相对导入

我对angular2/typescript中的导入有问题.我想使用像'app/components/calendar'这样的root的导入,而只是我能够使用的方式是这样的:

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

其中Calendar定义如下:

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

这显然会越来越差,你去的等级越低,最深的是'../../ ..'但它仍然非常糟糕和脆弱.有没有办法如何使用相对于项目根目录的路径？

我在Visual Studio中工作,相对导入似乎是唯一使VS能够识别这些imports.y的东西

1> Marek Dulows..：

---

回答

从TypeScript 2.0开始,您可以设置tsconfig.json属性baseUrl,如下所示:

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

然后,您可以使用所需的方式导入组件,例如:

import { Calendar } from 'components/calendar';

附录

后备路径分辨率

一个重要的考虑因素是指定baseUrl选项会导致TypeScript编译器:

查找关于baseUrl的路径

在失败的分辨率(找不到模块)上,查找与moduleResolution选项有关的路径

SystemJS

由于SystemJS在Angular开发阶段大量使用,因此请务必进行相应的配置systemjs.config.js,以便正确解析路径.

---

来源和进一步的细节:https://github.com/Microsoft/TypeScript/issues/5039

2> caeus..：

---

简短的回答

将compilerOption设置"moduleResolution"为"classic".

答案很长

你在用tsconfig.json吗？我猜你是.我一直在寻找一种方法,使语句,例如import someModule = require ("../../../../someModule"成import someModule=require("src/path/to/someModule").我发现浪费了几个小时后tsc可能会使用不同的算法来解决模块问题.我正在使用atom并且它创建了tsconfig.json与compilerOption属性moduleResolution设置为"node"并且它使用节点的shitty(借口我的法语)模块解析算法.我只是把"经典"和开始以明显的方式工作.

**更新**

只是不要使用这个解决方案.拥抱节点模块解析算法.社区依赖于它,所以如果你试图不这样做,一切都会破裂.使用别名或其他一些提供的解决方案.

---

这是我听过@caeus最可能的最糟糕的选择

---

到目前为止,对@nottinhill赞助的19个人中有没有一个有更好的解决方案？

---

"经典"选项完全打破了angular2,你知道怎么解决这个问题？

3> toskv..：

---

一种方法是使文件重新导出并使用较短的路径捆绑文件.

您可以在应用程序的根目录中包含components.ts文件夹.

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

并从组件导入它

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

然而,这将更适合于导出模块,以便其他人可以使用它们,而不是构建项目的方式.

另一种方法是放弃使用import语句,而是使用内部模块.

calendar.ts

module Components {
    export class Calendar {}
}

您可以在项目的任何文件中使用它,就像这样.

new Components.Calendar();

或者使用别名导入它.

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