Angular 2 - 依赖注入和桶装答案

【问题标题】：Angular 2 - Dependency Injection and BarrelingAngular 2 - 依赖注入和桶装
【发布时间】：2016-06-30 08:29:14
【问题描述】：

从桶 (https://angular.io/docs/ts/latest/glossary.html#!#barrel) 导入服务时，我遇到了依赖注入问题。

我遇到的问题是这样的：

使用 Angular 指南，在应用程序中有一个核心桶，然后每个文件夹都有一个桶，这些是通过在每个文件夹中都有一个 index.ts 来实现的。核心 index.ts 引用每个文件夹中的所有内容，而每个文件夹又引用特定文件。

核心索引.ts

...
export * from './test/index';

测试 index.ts

...
export * from './my-service.service';

代码

import { MyService } from '../../core';
...

@Injectable()
export class AuthGuard implements CanActivate {
    isValidSession: boolean = false;
    errorMessage: any;

    constructor(
        private myService: MyService
    ) { }

    canActivate(
        // Not using but worth knowing about
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ) {
        return this.myService.doSomething();
    }
}

以上代码导致如下错误：

Uncaught Cannot resolve all parameters for 'AuthGuard'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthGuard' is decorated with Injectable.

查看代码我没有发现缺少@Injectable 注释的任何问题。事实上，其他组件也使用了相同的服务，并使用核心 index.ts 导入。

我发现一个article 建议应该在构造函数中使用@Inject，因为有时将TypeScript 转换为JavaScript 时不会创建元数据。这并没有解决我的问题。在尝试了几件事后，我只是尝试更改导入以获取如下所示的服务，并且没有引发错误。

成功导入：

import { MyService } from '../../core/test/my-service.service';

或

import { MyService } from '../../core/test';

我不确定我的应用程序中的 index.ts 文件是否存在问题，或者文件结构本身是否有问题，但据我所知，它们运行良好。想知道为什么这个特殊的import 会有所作为。

【问题讨论】：

将导入更改为常规导入语句是否有效？
是的，我会把它添加到问题中。没想到还不清楚！ :)
我想有人提到桶中的出口顺序可能会导致问题。
可能是……奇怪的是，在应用程序组件中，我引用了/core 来获得这个特定的服务，这很好。这让我很困惑。
core/... 里面有什么东西正在导入AuthGuard？

标签： dependency-injection angular

【解决方案1】：

我也遇到过同样的问题，Günter 是对的：exports 在桶中的顺序似乎很重要。

就我而言，我的桶里有：

export * from 'my.component'
export * from 'my.service'

这导致了与您看到的相同的错误。将服务放在使用它的组件之前解决了问题：

export * from 'my.service'
export * from 'my.component'

我没有找到任何关于此的文档，但我发现这种行为肯定不太理想，因为

这是隐含的
没有记录
错误消息没有为您提供有关如何修复它的任何提示

【讨论】：

感谢您的回答。老实说，我并没有深入研究它。但我肯定会尝试使用导出的顺序，看看它是否能解决问题。会让你知道:)
天哪……我整天都在追踪这个修复程序。谢谢！

【解决方案2】：

如上所述，顺序确实很重要！不知道这是否是一个错误，但无论如何......

所以，在我看来，用元数据装饰的类应该位于 index.ts 的顶部如果其中一个注入另一个，“另一个”应该在“一个”之上。

【讨论】：