Why can't Angular2 inject my service?

Question

I was in the process of writing a plnkr to test some routing issues when suddenly this error message popped up and wouldn't go away no matter what I changed in my code:

EXCEPTION: Error: Uncaught (in promise): Can't resolve all parameters for EmployeeListComponent: (?).

Here's the relevant portion of the code:

export class EmployeeListComponent {
  employees: Employee[];
  constructor(private _employeeService: EmployeeService) {
    _employeeService.getAll().subscribe(employees =>
      this.employees = employees);
  }
}

So it seems Angular is unable to resolve EmployeeService, right? I commented it out in the above snippet and sure enough, no errors.

Did I forget to register it within main.ts or app.component.ts? Nope,

import {
  Component
} from '@angular/core';

import { 
    ROUTER_DIRECTIVES
} from '@angular/router';

import {
  EmployeeService
} from './employee.service';


@Component({
  selector: 'plk-app',
  template: '<router-outlet></router-outlet>',
  directives: [ 
    ROUTER_DIRECTIVES
  ],
  providers: [
    EmployeeService
  ]
})
export class AppComponent {

}

Should I have registered it in main.ts? Well, I had when that error first cropped up and I then moved it to app.component.ts to check if that would fix it, it didn't.

At the moment I can't see the forest for the trees and Angular's error messages aren't really helping (they never have been). Is there anyone here who can spot the issue? The plnkr can be found here.

Temporary solution: Import 'Inject' from @angular/core in EmployeeListComponent and constructor should look like: constructor(@Inject(EmployeeService) private _employeeService: EmployeeService) {} Soon I'll come with proper solution. — Ravinder Kumar, Jul 28 '16 at 05:02
Above solution is suggested if you are not using typescript compiler. Are you sure that you are using typescript compiler? — Ravinder Kumar, Jul 28 '16 at 05:07

score 5 · Accepted Answer · answered Jul 28 '16 at 05:18

5

After visiting on few questions I came to know that this problem occurs because of absence of TypeScript compiler. If you are not using typescript compiler then you need to explicitly inject service by using 'Inject' from '@angular/core'. I have tried it in plunker provide by you and its working.

In your case you need to make changes in your employee-list.component.ts. Import Inject from @angular/core and in constructor explicitly inject your service like:

constructor(@Inject(EmployeeService) private employeeService: EmployeeService){}

Feel free for any question and accept my answer if you found the solution helpful to you.

answered Jul 28 '16 at 05:18

Ravinder Kumar

732
1
5
18

Can you please provide a link to " not using typescript compiler then you need to explicitly inject service by using '`Inject`'". `@Inject()` is usually not necessary, even in Plunker. Interesting find though, that `@Inject()` solves the error. – Günter Zöchbauer Jul 28 '16 at 05:19
@GünterZöchbauer: please refer the link. http://stackoverflow.com/questions/35370405/angular-2-http-cannot-resolve-all-parameters-for-appservice – Ravinder Kumar Jul 28 '16 at 05:30
Thanks for the link. Still weird. Why does it work in most cases but not always. – Günter Zöchbauer Jul 28 '16 at 05:32
I dont think so it is necessary. @Ravinder please show. your resolved plunker link. – micronyks Jul 28 '16 at 05:46
Yea that's weird, because the code was written with Typescript, not having a TSC should not result to a successful bootstrap. – Harry Ninh Jul 28 '16 at 05:59
change below plunker as per my answer. http://plnkr.co/edit/nWtpPQ7sldNlQNtJt86h?p=preview – Ravinder Kumar Jul 28 '16 at 06:07

score 2 · Answer 2 · answered Jul 28 '16 at 06:34

Here is working plunker

First step:

system.js.config

var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true,
      emitDecoratorMetadata: true <== add this line
    },

Second step:

employee.model.ts now looks like:

export class Employee {
  id: number;
  name: string;
}

Third step:

Remove async pipe from template of EmployeeListComponent. It should be:

<li *ngFor="let employee of employees">
  ...
</li>

Why can't Angular2 inject my service?

2 Answers2