如何让我的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的文件夹中.我创建了一个名为heroes/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

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

index.ts

   export * from './heroes.component';

systemjs.config.js

添加map如下所示的条目,

  'heroes':                     'app/heroes', 

然后在packages下面输入一个条目,

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

这将解决barrel问题,但不会完全解决您的所有问题,因为您hero-detail在英雄组件内部也有引用,因此您必须处理这些问题.

希望这可以帮助!!