如何让我的 Angular 2 应用程序与桶文件导入一起使用？

Question

我正在尝试遵循此处找到的 Angular 2 样式指南 04-10 Create and Import Barrels： https : //angular.io/docs/ts/latest/guide/style-guide.html

当我运行我的应用程序时，angular 现在会尝试加载一个不存在的文件：“my-component-name-here.js”。

为了说明这个问题，我修改了 Angular 2 示例应用程序以使用一个桶文件，现在它也抛出了 404 错误。

我把英雄组件文件放在他们自己的文件夹中，叫做英雄。 我创建了一个名为 hero/index.ts 的新文件：

export * from './heroes/heroes.component';

我将 app.component.ts 中的 import 语句更改为：

import { HeroesComponent } from './heroes';

当应用程序尝试加载时，它在开发者控制台中出现以下错误：

Error: Error: XHR error (404 Not Found) loading app/heroes.ts(…)

plunkr 在这里找到： http ://plnkr.co/edit/YXY0PwuFot1g1s6qTqDt?p=preview

我怀疑这与 SystemJS 有关，但我对它的了解不足以解决它。 任何人都可以帮忙吗？ 提前致谢！

Answer 1

你必须做一些改变才能使桶工作，

索引.ts

   export * from './heroes.component';

systemjs.config.js

添加一个条目到map如下所示，

  'heroes':                     'app/heroes', 

然后在packages输入如下内容，

  'heroes': { main: 'index.ts',  defaultExtension: 'ts' },

这将解决barrel问题，但并不能完全解决您的所有问题，因为您在英雄组件中也参考了hero-detail ，因此您必须解决这些问题。

Answer 2

我在你的 plunkr 中可以看到， HeroesComponent类位于app/heroes/heroes.component.ts文件中。 所以我会改用以下内容：

import { HeroesComponent } from './heroes.component';