如何讓我的Angular 2應用程序使用桶文件導入？

當我運行我的應用程序，現在的角度試圖加載不存在的文件：「我 - 組件名稱here.js」。

爲了說明這個問題，我修改了Angular 2示例應用程序以使用桶文件，現在也拋出了404錯誤。

我把英雄組件文件放到他們自己的文件夾中，叫做英雄。我創建了一個新的文件，所謂英雄/ index.ts：

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

我改變了import語句中app.component.ts到：

import { HeroesComponent } from './heroes';

當應用程序試圖加載它具有以下錯誤作爲開發者控制檯看到：

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

我懷疑這與SystemJS有關，但我無法解決這個問題。誰能幫忙？提前致謝！

2016-05-16 Foxy

參見http://stackoverflow.com/questions/37082601/how-to-import-a-barrel-by-folder-name-only –

如果能夠充分解決您的問題，請不要忘記接受以下答案。 –

你必須做出一些改變，使桶的工作，

index.ts

export * from './heroes.component';

systemjs.config.js

添加一條評論到以下map，

'heroes':      'app/heroes',

然後在packages做出類似下面的條目，

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

這將解決barrel問題，但不能完全解決所有的問題，因爲你有參考hero-detail以及英雄組件內，所以你必須在這些工作。

希望這有助於！

2016-05-16 18:29:54

我試着把你的修改添加到plunkr中，但是現在得到這個錯誤：錯誤：XHR錯誤（404 Not Found）loading /app/heroes/heroes/heroes.component.ts(...） – Foxy

我仍然看到export * from' ./heroes/heroes.component';在你的app/heroes/index.ts中，它應該是從'./heroes.component'導出*。 –

啊你說得對，謝謝你現在在工作！ – Foxy

作爲一個我可以在你的plunkr中看到的，HeroesComponent類位於app/heroes/heroes.component.ts文件中。所以我會用下列代替：

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

2016-05-16 18:24:36

回答