为什么Angular2不能注入我的服务？

Question

我正在编写一个plnkr来测试一些路由问题突然出现这个错误消息，无论我在代码中改变了什么都不会消失：

EXCEPTION：错误：未捕获（在承诺中）：无法解析EmployeeListComponent的所有参数：（？）。

这是代码的相关部分：

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

所以似乎Angular无法解析EmployeeService ，对吧？ 我在上面的片段中对此进行了评论，当然，没有错误。

我忘了在main.ts或app.component.ts注册吗？ 不，

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 {

}

我应该在main.ts注册吗？ 好吧，我在第一次出现错误时就把它移到了app.component.ts来检查是否会修复它，但事实并非如此。

目前我无法看到森林中的树木，而Angular的错误消息并没有真正帮助（它们从来没有）。 这里有人能发现这个问题吗？ plnkr可以在这里找到。

Answer 1

在访问几个问题后，我发现由于缺少TypeScript编译器而出现此问题。 如果您没有使用typescript编译器，那么您需要使用' @angular/core '中的' Inject '来显式注入服务。 我已经尝试过你提供的plunker及其工作。

在您的情况下，您需要在employee-list.component.ts进行更改。 从@angular/core导入Inject并在构造函数中显式注入您的服务，如：

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

如果您发现该解决方案对您有帮助，请随意提出任何问题并接受我的回答。

Answer 2

这是工作的plunker

第一步：

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
    },

第二步：

employee.model.ts现在看起来像：

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

第三步：

从EmployeeListComponent模板中删除async管道。 它应该是：

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