Come posso far funzionare la mia app Angular 2 con le importazioni di file barili?

Question

sto cercando di seguire la linea guida angolare 2 stile 04-10 creare ed importare Botti trovate qui: https://angular.io/docs/ts/latest/guide/style-guide.html

Quando eseguo la mia applicazione, angolare ora tenta di caricare un file che non esiste: "mio- componente-nome-here.js".

Per illustrare il problema, ho modificato l'app di esempio Angular 2 per utilizzare un file barile e ora genera anche un errore 404.

Ho inserito i file del componente degli eroi nella loro cartella denominata eroi. Ho creato un nuovo file chiamato eroi/index.ts:

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

ho cambiato l'istruzione import in app.component.ts a:

import { HeroesComponent } from './heroes'; 

Quando l'applicazione cerca di caricare ha il seguente errore come si vede nella console sviluppatore:

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

il plunkr si trova qui: http://plnkr.co/edit/YXY0PwuFot1g1s6qTqDt?p=preview

Sospetto che questo abbia qualcosa a che fare con SystemJS ma non ne so abbastanza per risolverlo. Qualcuno può aiutare? Grazie in anticipo!

Answer 1

devi fare alcune modifiche per rendere il lavoro barile,

index.ts

export * from './heroes.component'; 

systemjs.config.js

Aggiungere una voce a map come di seguito,

'heroes':      'app/heroes', 

poi in packages fanno una voce come qui di seguito,

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

Questo risolverà barrel problema, ma non risolvere completamente tutti il ​​problema come si deve riferimento ai hero-detail pure all'interno componente eroi, in modo da lavorare su quelli.

Spero che questo aiuti !!

Answer 2

Come lontano posso vedere nel tuo plunkr, la classe HeroesComponent si trova all'interno del file app/heroes/heroes.component.ts. Quindi mi sento di utilizzare le seguenti invece:

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