Javascript 角度模块：创建纯服务模块的问题。解决参数问题

我正在创建一个包含服务/提供商的Angular 4模块。 目的是让任何导入模块的项目都能够注入服务

当前在解析服务的参数时遇到问题，特别是来自

@angular/Http

的

Http

堆栈跟踪：

Uncaught Error: Can't resolve all parameters for CommonService: (?, [object Object], [object Object]).
      at ZoneAwareError (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:20), <anonymous>:2571:38)
      at syntaxError (compiler.es5.js:1694)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15925)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15793)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15779)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:16070)
      at compiler.es5.js:15999
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15959)
      at compiler.es5.js:15534
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15525)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26958)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)

Uncaught Error: Can't resolve all parameters for AppComponent: (?).
    at ZoneAwareError (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:20), <anonymous>:2571:38)
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15925)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15793)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15388)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.es5.js:16047)
    at compiler.es5.js:15629
    at Array.map (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15629)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26958)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26931)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26860)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4536)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522)
    at Object.../../../../../src/demo/main.ts (main.ts:11)

你知道我做错了什么吗

这是角度服务模块：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { CommonModule} from '@angular/common';
import { CommonService } from './Common.service';
import { ServiceConfiguration } from '../service-config.model';
import { CommonServiceConstants } from './Common.constants';

export * from './Common.service';

@NgModule({
    imports: [
        CommonModule,
        HttpModule
    ]
})
export class CommonServiceModule {
    static withConfiguration(defaultHeaders: { [key: string]: string }, commonConfig: ServiceConfiguration): ModuleWithProviders {
        return {
            ngModule: CommonServiceModule,
            providers: [
                CommonService,
                { provide: CommonServiceConstants.CommonConfigKey, useValue: commonConfig },
                { provide: CommonServiceConstants.DefaultHeaders, useValue: defaultHeaders }
            ]
        };
    }
}

服务内容如下：

import { Injectable, Inject } from '@angular/core';
import { Http, RequestOptionsArgs } from '@angular/http';
import { Logger } from '../../logger';
import { Observable } from 'rxjs/Observable';
import { BaseService } from '../base.service';
import { ServiceConfiguration, UrlConfiguration } from '../service-config.model';
import { Order, CommonResponse } from './Common.model';
import { CommonServiceConstants } from './Common.constants';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

export * from './Common.model';

/**
 * The Common Service
 * @export
 * @class CommonService
 * @extends {BaseService}
 */
@Injectable()
export class CommonService extends BaseService {

    /**
     * Creates an instance of CommonService.
     * @param {Http} http
     * @memberof CommonService
     */
    constructor(private http: Http,
        @Inject(CommonServiceConstants.CommonConfigKey) private CommonConfig: ServiceConfiguration,
        @Inject(CommonServiceConstants.DefaultHeaders) defaultHeaders: any) {
        super(defaultHeaders);
    }

    /**
     * Gets Common
     */
    public getCommon(retrievalType: string): Observable<CommonResponse> {
        const urlConfig = <UrlConfiguration>this.CommonConfig.urls[CommonServiceConstants.RetrieveCommonName];
        const startTime = performance.now();
        let retrievalUrl = urlConfig.url + CommonServiceConstants.RetrieveCommonEndpoint;
        retrievalUrl = retrievalUrl;

        return <Observable<CommonResponse>>this.http.get(retrievalUrl, <RequestOptionsArgs>{
            headers: this.getHeaders(urlConfig.headers, retrievalType),
            authType: this.CommonConfig.authType,
            params: {
                'commonRetrievalType': '' + retrievalType
            }
        })
            .map(
            (response) => {
                Logger.info(CommonService.name, 'Successfully retrieved Common. '
                    + ' type: ' + retrievalType, startTime);
                return response.json();
            }
            )
            .catch((error: any) => {
                Logger.error(CommonService.name, 'Error retrieving Common. '
                    + ' type: ' + retrievalType, error);
                throw (error);
            });
    }
}

从'@angular/core'导入{Injectable，injection}；
从'@angular/Http'导入{Http，RequestOptionsArgs}；
从“../../Logger”导入{Logger}；
从“rxjs/Observable”导入{Observable}；
从“../base.service”导入{BaseService}；
从“../service config.model”导入{ServiceConfiguration，UrlConfiguration}；
从“/Common.model”导入{Order，CommonResponse}；
从“./Common.constants”导入{CommonServiceConstants}；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/map'；
从“./Common.model”导出*；
/**
*共同事务
*@出口
*@class公共服务
*@extends{BaseService}
*/
@可注射（）
导出类CommonService扩展BaseService{
/**
*创建CommonService的实例。
*@param{Http}Http
*@memberofcommonservice
*/
构造函数（私有http:http，
@注入（CommonServiceConstants.CommonConfigKey）私有CommonConfig:ServiceConfiguration，
@注入（CommonServiceConstants.DefaultHeaders）DefaultHeaders:any）{
超级（默认标题）；
}
/**
*变得普遍
*/
公共getCommon（retrievalType:string）：可观察{
const urlConfig=this.CommonConfig.url[CommonServiceConstants.RetrieveCommonName]；
const startTime=performance.now（）；
让retrievalUrl=urlConfig.url+CommonServiceConstants.RetrieveCommonEndpoint；
retrievalUrl=retrievalUrl；
返回此.http.get（retrievalUrl{
headers:this.getHeaders（urlConfig.headers，retrievalType），
authType:this.CommonConfig.authType，
参数：{
“commonRetrievalType”：“”+retrievalType
}
})
.地图(
（回应）=>{
Logger.info（CommonService.name，'已成功检索到Common'
+'类型：'+retrievalType，startTime）；
返回response.json（）；
}
)
.catch（（错误：任意）=>{
Logger.error（CommonService.name，'error retrieving Common'
+“类型：”+retrievalType，错误）；
抛出（错误）；
});
}
}

使用模块的我的应用程序组件：

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import {
  CommonServiceModule
} from '../../lib/index';

const config = { url: 'http://localhost:8090/application'};
const defaultHeaders = { 'applciation-id': 'AP1234' };

@NgModule({
  imports: [
    BrowserModule,
    CommonServiceModule.withConfiguration(defaultHeaders, <any>config),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
  ]
})
export class AppModule {
}

从'@angular/core'导入{NgModule}；
从'@angular/http'导入{HttpModule}；
从“@angular/platform browser”导入{BrowserModule}；
从“./app.component”导入{AppComponent}；
进口{
公共服务模块
}来自“../lib/index”；
const config={url:'http://localhost:8090/application'};
const defaultHeaders={'application id'：'AP1234'}；
@NGD模块({
进口：[
浏览器模块，
CommonServiceModule.withConfiguration（defaultHeaders，config），
],
声明：[AppComponent]，
引导：[AppComponent]，
供应商：[
]
})
导出类AppModule{
}