私のAngular 2アプリをバレルファイルのインポートで使用するにはどうすればよいですか？

Question

は、私は角2スタイルガイドライン04-10を追跡しようとしているの作成とインポートバレルはこちらをご覧ください：https://angular.io/docs/ts/latest/guide/style-guide.html

私は私のアプリを実行すると、角度が今存在しないファイルをロードしようとします：「my-をcomponent-name-here.js」と入力します。

問題を説明するために、Angular 2サンプルアプリケーションをバレルファイルを使用するように変更しました。これで、今も404エラーがスローされます。

英雄のコンポーネントファイルをヒーローという独自のフォルダに入れました。アプリは、それが次のエラーを持ってロードしようとすると

import { HeroesComponent } from './heroes'; 

：私はapp.component.tsでimport文を変更し

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

：私は英雄/ index.tsと呼ばれる新しいファイルを作成しましたデベロッパーコンソールに見られるように：

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に次のようにエントリを追加します。

これは barrel問題を解決しますが、あなたは英雄コンポーネント内だけでなく hero-detailへの参照を持っているように完全にあなたのため、すべての問題が解決しない

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

以下のようなエントリを作成packagesで、その後

'heroes':      'app/heroes', 

、それらに取り組まなければならない。

これが役立ちますように！

Answer 2

あなたのplunkrから見ると、HeroesComponentクラスはapp/heroes/heroes.component.tsファイル内にあります。だから私は、代わりに以下を使用します。

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