首页 文章

如何让我的Angular 2应用程序与桶文件导入一起使用？

提问于
浏览 次
8

我正在尝试遵循Angular 2风格指南04-10创建和导入桶在这里找到：https://angular.io/docs/ts/latest/guide/style-guide.html

当我运行我的应用程序时，angular现在尝试加载一个不存在的文件：“my-component-name-here.js” .

为了说明这个问题，我修改了Angular 2示例应用程序以使用一个桶文件，它现在也引发了404错误 .

我将英雄组件文件放入他们自己的名为heroes的文件夹中 . 我创建了一个名为heroes / 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有关，但我不太了解它来修复它 . 有人可以帮忙吗？提前致谢！

angularjs angular systemjs

2 回答

  • 0

    你必须做一些改变才能使桶工作，

    index.ts

    export * from './heroes.component';

    systemjs.config.js

    添加一个条目到 map ，如下所示，

    'heroes':                     'app/heroes',

    然后在 packages 做一个如下所示的条目，

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

    这将解决 barrel 问题，但由于您在英雄组件内部引用了 hero-detail ，因此无法完全解决您的所有问题，因此您必须处理这些问题 .

    希望这可以帮助！！

    回复于
  • 13

    我可以在你的plunkr中看到， HeroesComponent 类位于 app/heroes/heroes.component.ts 文件中 . 所以我会使用以下代码：

    import { HeroesComponent } from './heroes.component';
    回复于

相关问题