Error when trying to inject a service into an angular component “EXCEPTION: Can't resolve all parameters for component”, why?

Question

I\'ve built a basic app in Angular, but I have encountered a strange issue where I cannot inject a service into one of my components. It injects fine into any of the three o

Answer 1

This can be a really difficult issue to debug due to the lack of feedback in the error. If you are concerned about an actual cyclic dependency, here's the most important thing to look at in the stack trace a) the name of the service b) the constructor parameter in that service that has a question mark e.g. if it looks like this:

can't resolve all parameters for AuthService: ([object Object], [object Object], [object Object], [object Object], ?)

then it means the 5th parameter is a service that also depend on AuthService. i.e. question mark, means it wasn't resolved by DI.

From there, you just need to decouple the 2 services by restructuring the code.

Answer 2

for angular 6 and newer versions, try

@Injectable({
  providedIn: 'root'
})

..right above your service class with no other lines in between

advantages

• no need to add the service to any module (will be "auto-discovered")
• service will be a singleton (since it will be injected into root)

[angular docs]

Answer 3

Another possibility is not having emitDecoratorMetadata set to true in tsconfig.json

{
  "compilerOptions": {

     ...

    "emitDecoratorMetadata": true,

     ...

    }

}

Answer 4

As of Angular 2.2.3 there is now a forwardRef() utility function that allows you to inject providers that have not yet been defined.

By not defined, I mean that the dependency injection map doesn't know the identifier. This is what happens during circular dependencies. You can have circular dependencies in Angular that are very difficult to untangle and see.

export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(@Inject(forwardRef(() => MobileService)) public ms: MobileService) {
    console.log(ms);
  }

}

Adding @Inject(forwardRef(() => MobileService)) to the parameter of the constructor in the original question's source code will fix the problem.

References

Angular 2 Manual: ForwardRef

Forward references in Angular 2

Answer 5

In my case, it happened because I didn't declare the type for a constructor parameter.

I had something like this:

constructor(private URL, private http: Http) { }

and then changing it to the code below solved my problem.

constructor(private URL : string, private http: Http) {}

Answer 6

This answer might be very helpful for this problem. In addition, for my case, exporting the service as default was the cause.

WRONG:

@Inject()
export default class MobileService { ... }

CORRECT:

@Inject()
export class MobileService { ... }