将@Injectable()注入另一个@Injectable()时出错

Question

我在使用Angular2 DI时遇到麻烦。我尝试将一个类注入到另一个类中，但它引发了以下错误：

消息："Cannot resolve all parameters for 'ProductService'(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ProductService' is decorated with Injectable."

全栈："BaseException@http://localhost:5555/node_modules/@angular/core/core.umd.js:3776:27NoAnnotationError@http://localhost:5555/node_modules/@angular/core/core.umd.js:4480:13_extractToken@http://localhost:5555/node_modules/@angular/core/core.umd.js:5027:19_dependenciesFor/<@http://localhost:5555/node_modules/@angular/core/core.umd.js:4979:49_dependenciesFor@http://localhost:5555/node_modules/@angular/core/core.umd.js:4979:16resolveReflectiveFactory@http://localhost:5555/node_modules/@angular/core/core.umd.js:4872:28resolveReflectiveProvider@http://localhost:5555/node_modules/@angular/core/core.umd.js:4895:84resolveReflectiveProviders@http://localhost:5555/node_modules/@angular/core/core.umd.js:4902:24ReflectiveInjector</ReflectiveInjector.resolve@http://localhost:5555/node_modules/@angular/core/core.umd.js:5376:20ReflectiveInjector</ReflectiveInjector.resolveAndCreate@http://localhost:5555/node_modules/@angular/core/core.umd.js:5406:47bootstrap@http://localhost:5555/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js:468:27@http://localhost:5555/app/main.js:12:1@http://localhost:5555/app/main.js:1:1@http://localhost:5555/app/main.js:1:1bootstrap/</</__exec@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:1506:1bootstrap/</</</</entry.execute@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:3921:11linkDynamicModule@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:3247:18link@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:3090:11bootstrap/</</</</</<.execute@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:3427:13doDynamicExecute@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:796:20link@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:998:20doLink@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:650:7updateLinkSetOnLoad@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:698:18proceedToTranslate/</<@http://localhost:5555/node_modules/systemjs/dist/system.src.js?1465996676353:510:11Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:323:20Zone</Zone</Zone.prototype.run@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:216:25scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:571:53Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:356:24Zone</Zone</Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:256:29drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:474:26ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1465996676355:426:22

这里奇怪的是我得到了两个类，一个是被注入的，另一个是接受注入的，用@Injectable()装饰。相关代码如下：

main.ts

import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, provide } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';
import { MarkdownService } from './shared/index';
import {
  ProductService,
  WidgetService,
  WidgetItemService
} from './services/index';

import { AppComponent } from './app.component';

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  ProductService, WidgetService, WidgetItemService, MarkdownService,
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

widget-item.service.ts

import { Injectable } from '@angular/core';
import { Product, Widget, WidgetItem } from '../index';

@Injectable()
export class WidgetItemService {
  private widget_items: Array<WidgetItem> = [];

  getAll(key: string = null): Promise<any> {
    return Promise.resolve(this.widget_items);
  };

  constructor() {
  };
};

product.service.ts

import { Injectable } from '@angular/core';
import { Product, WidgetItem, WidgetItemService } from '../index';

@Injectable()
export class ProductService {
  getWidgetItems(product_id: number) {
    var widget_items: WidgetItem[] = [];

    this.widgetItemService.getAll().then((found_widget_items: WidgetItem[]) => {
      widget_items = found_widget_items.filter(widget_item => widget_item.product_id == product_id);
      return Promise.resolve(widget_items);
    }).catch(error => {
      return Promise.reject(error);
    });
  }

  constructor(
    private widgetItemService: WidgetItemService
  ) {
  };
}

有什么想法吗？

Answer 1

大多数情况下，当导入对于构造函数中要使用的参数类型不正确时，会出现此错误。

您应该检查以下内容：

import { Injectable } from '@angular/core';
import { Product, WidgetItem, WidgetItemService } from '../index';

console.log(WidgetItemService); // <----

@Injectable()
export class ProductService {
  constructor(
    private widgetItemService: WidgetItemService
  ) {
  }
}