如何讓我的 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';