Comment faire pour que mon application Angular 2 fonctionne avec les importations de fichiers barils ?

Question

J'essaie de suivre la directive de style d'Angular 2 04-10 Créer et importer des barils trouvée ici : https://angular.io/docs/ts/latest/guide/style-guide.html

Quand je lance mon application, Angular essaie maintenant de charger un fichier qui n'existe pas : "mon-composant-nom-ici.js".

Pour illustrer le problème, j'ai modifié l'exemple d'application Angular 2 pour utiliser un fichier baril et une erreur 404 s'est produite.

J'ai mis les fichiers de composants des héros dans leur propre dossier appelé héros. J'ai créé un nouveau fichier appelé heroes/index.ts :

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

J'ai changé la déclaration d'importation dans app.component.ts en :

import { HeroesComponent } from './heroes';

Lorsque l'application tente de se charger, l'erreur suivante apparaît dans la console du développeur :

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

Le plunkr se trouve ici : http://plnkr.co/edit/YXY0PwuFot1g1s6qTqDt?p=preview

Je soupçonne que cela a quelque chose à voir avec SystemJS, mais je n'en sais pas assez pour le résoudre. Quelqu'un peut-il m'aider ? Merci d'avance !

Answer 1

Vous devez faire quelques changements pour que le baril fonctionne,

index.ts

   export * from './heroes.component';

systemjs.config.js

Ajouter une entrée à map comme ci-dessous,

  'heroes':                     'app/heroes', 

alors dans packages faites une entrée comme ci-dessous,

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

Cela permettra de résoudre barrel mais ne résout pas complètement votre problème car vous avez des références à hero-detail ainsi qu'à l'intérieur du composant héros, donc vous devez travailler sur ceux-ci.

J'espère que cela vous aidera !

Answer 2

D'après ce que je peux voir dans votre plunkr. HeroesComponent se trouve dans la classe app/heroes/heroes.component.ts fichier. J'utiliserais donc ce qui suit à la place :

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