导入在Angular 2中如何工作？

我跟着安格拉尔的快速入门2。我使文件夹结构与教程不同。我遇到一个错误，找不到模块…

我知道错误的原因是导入问题

我的文件夹结构：

我已经在hero.ts文件中导出了

hero

接口。我想在

hero detail.component.ts

文件中导入这个接口

我试过：

import {Hero} from '../app/hero';
import {Hero} from './hero';
import {Hero} from './app/hero';

这些都不起作用

系统将在index.html中进行配置

我的问题是:

---

导入在Angular 2中是如何工作的？

那么您可能需要

import {Hero} from '../hero';

---

它应该与SystemJS的配置有关

主HTML文件中是否包含SystemJS文件：

<script src="node_modules/systemjs/dist/system.src.js"></script>

是否使用JS默认扩展配置SystemJS：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  (...)
</script>

System.config({
包：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
(...)

有了这一点，甘特提出的方案应该奏效

希望它能帮助你， Thierry要导航“向上”：

---

您是否正确添加了系统配置？您是否正在将ts编译为js？我在你的文件结构中没有看到js文件。@Langley我刚刚更新了我文件夹结构的图片，正如你所看到的，所有文件都转换为js文件。这就是为什么它现在可以工作=），你默认为js文件：

defaultExtension:'js'

@Langley这很有帮助。之所以不起作用，是因为

hero detail.component

中的templateUrl错误。我想知道在Angular2中获取导入文件路径的一般方法。例如，

从'angular2/core'导入{Component}可以导入angular2。如果我更改angular2的位置怎么办？我确实按照您发布的方式配置了系统。您能解释一下您是如何想出这个解决方案的吗。现在可以了。我想了解此文件的相对路径和绝对路径。从导入文件的相对路径开始，
。/
比导入文件高一级，然后我们已经到达导入文件的位置，只需添加不带扩展名的文件名即可。相对路径似乎是TS中的默认路径（我不是TS开发人员）。下面是“绝对”（包根相对）路径的SO答案
import {Hero} from './../hero';