Angular 2-依赖注入和桶装 [英] Angular 2 - Dependency Injection and Barreling

问题描述

从桶中导入服务时，依赖注入存在问题(

I've had a issue with Dependency Injection when importing a service from a barrel (https://angular.io/docs/ts/latest/glossary.html#!#barrel).

我所面临的问题是:

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

Using the Angular guidelines, in the app there's a core barrel and then a barrel for every folder, these are achieved by having an index.ts in each folder. The core index.ts references everything from each folder and in turn each folder references the specific files.

核心index.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();
    }
}

上面的代码导致以下错误:

The above code resulted in the following error:

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导入.

Looking at the code I did not find any issue with missing @Injectable annotations. In fact the same service was being used in other components and was imported using the core index.ts.

@Inject，因为有时将TypeScript转换为JavaScript时不会创建元数据.就我而言，这不能解决问题.在尝试了几件事之后，我只是尝试更改导入以获取如下所示的服务，并且未引发错误.

An article I found suggested that @Inject in the constructor should be used because sometimes when TypeScript is converted to JavaScript the metadata is not created. This did not solve the issue in my case. After trying several things I simply tried changing the import to get the service like below, and the error was not thrown.

成功导入:

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

或

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

我不确定我的应用程序中的index.ts文件是否存在问题，或者文件结构本身是错误的，但是从我的眼中看，它们工作正常.想知道为什么这个特殊的import有所作为.

I'm not sure if there's an issue in the index.ts files in my application or maybe the file structure itself is wrong, but from what I can see they're working fine. Would like to know why this particular import is making a difference.

推荐答案

我遇到了完全相同的问题，并且

I've had the exact same problem and Günter is right: The order of exports in the barrel does seem to matter.

在我的情况下，我已经在桶里了:

In my case I had in my barrel:

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

导致了与您看到的相同的错误. 将服务放置在使用它的组件之前 可以解决问题:

which resulted in the same error that you saw. Putting the service before the component that's using it solved the problem:

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

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

I didn't find any documentation about this but I find this behavior definitely less than ideal because

• 它是隐式的
• 未记录
• 错误消息没有给您任何有关如何解决它的提示

这篇关于Angular 2-依赖注入和桶装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！