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

Question

我在使用 Angular2 DI 时遇到了问题。我尝试将一个类注入(inject)另一个类，它引发了以下错误:

留言:"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

奇怪的是我得到了两个类，一个被注入(inject)，一个被注入(inject)，用 @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
  ) {
  }
}