Angular 2 - Dependency Injection and Barrel

Question

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

The problem I am facing is this:

Using the recommendations of Angular, the application has a barrel with a core, and then a barrel for each folder, this is achieved using index.ts in each folder. The main index.ts refers to all files from each folder, and in turn, each folder refers to specific files.

core index.ts

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

test index.ts

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

the code

 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 led to 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.

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

An article I suggested that @Inject in the constructor should be used, because sometimes when TypeScript is converted to JavaScript, metadata is not created. This did not solve the problem in my case. After trying a few things, I just tried changing the import to get the service, as shown below, and no error was selected.

Successful import:

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

or

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

I'm not sure if there is a problem in the index.ts files in my application or maybe the file structure itself is wrong, but from what I see, they work fine. I would like to know why this particular import matters.

Answer 1

I had the same problem, and Günter is right: the export order in the barrel really matters.

In my case, I was in my barrel:

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

which led to the same error as you. Putting the service before the component using it solved the problem:

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

I have not found any documentation about this, but I believe that this behavior is definitely less than ideal, because

• he is implicit
• it is not documented
• The error message does not give you any advice on how to fix it.

Answer 2

Order matters as above! Not sure if this is a mistake or not, but anyway ...

So, it seems to me that classes decorated with metadata should be at the top of index.ts. If one of them introduces the other, the "other" should be higher than the "one".