如何让我的 Angular 2 应用程序处理桶文件导入？

Question

我正在努力遵循 Angular 2 风格指南 04-10 创建和导入桶，在此处找到：https://angular.io/docs/ts/latest/guide/style-guide.html

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

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

我把英雄组件文件放到了他们自己的名为英雄的文件夹中。我创建了一个名为 heroes/index.ts:

的新文件

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

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

import { HeroesComponent } from './heroes';

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

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

我怀疑这与 SystemJS 有关，但我对它的了解还不足以修复它。谁能帮忙？提前致谢！

Answer 1

据我在您的 plunkr 中所见，HeroesComponent class 位于 app/heroes/heroes.component.ts 文件中。所以我会改用以下内容：

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

Answer 2

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

index.ts

   export * from './heroes.component';

systemjs.config.js

向 map 添加条目，如下所示，

  'heroes':                     'app/heroes',

然后在 packages 中输入如下内容，

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

这将解决 barrel 问题，但不能完全解决您的所有问题，因为您参考了 hero-detail 以及 heroes 组件中的内容，因此您必须处理这些问题。

How can I get my Angular 2 app to work with barrel file imports?