Angular 4 [object Object]没有提供者！在TranslateModule上使用来自另一个libray的提供程序

Question

我有一个外部库，希望在几个应用程序中使用通用代码。我想在共享库中使用以下提供程序，并将其作为使用中的应用程序TranslateModule的translateloader

在我的公共图书馆中，我有：

LanguageLoader

此提供程序将在应用启动时加载基本消息属性。

@Injectable()
export class LanguageLoaderProvider implements TranslateLoader {

  constructor(private webappServerProvider: CustomHttpProvider ) {

  }

  getTranslation(lang: string): Observable<any> { 
    //always load the common one
    const uri = `url_string`;    
    return Observable.create(observer => {
      this.webappServerProvider.httpGet(uri).subscribe((resp) => {
        let messages = JSON.parse(resp);
        observer.next(messages);
        observer.complete();
      }, (error) => {
        observer.next({});
        observer.complete();
      });
    });
  }

}

CustomHttpProvider

@Injectable()
export class CustomHttpProvider extends AbstractHttpProvider{

    url:string;
    constructor(public http: HttpClient,  @Inject('config') private config: CommonModuleConfig) {
        super(http);
        this.url = config.webappServer.uri;
    }
    getBaseUrl(){
        return this.url;
    }
}

通用模块声明

此模块依赖于config对象从该库的使用应用程序中获取基本uri。

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CustomHttpProvider } from './custom-http';
import { LanguageLoaderProvider } from './language-loader/language-loader';
import { CommonModuleConfig } from './../models/common-module-config'

@NgModule({
  declarations: [],
  imports: [],
  exports: [],
})
export class CommonProviderModule {
    public static forRoot(config: CommonModuleConfig): ModuleWithProviders {
      return {
        ngModule: CommonProviderModule,
        providers: [          
            LanguageLoaderProvider,
            CustomHttpProvider ,
            { provide: 'config', useValue: config }
        ]
      };
    }
}

在我使用的消费应用程序的app.module.ts中：

   const commonModuleConfig: CommonModuleConfig = {
    artifactInfo: {
      uri: 'assets/build-info/app-manifest.json'
    },
    webappServer: {
      uri: environment.webappServer
    }
};

@NgModule({
    declarations: [
        MyApp,
    ],
    imports: [
        ComponentsModule,
        HttpModule,
        HttpClientModule,
        CommonProviderModule.forRoot(commonModuleConfig),
        BrowserAnimationsModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useClass: LanguageLoaderProvider     
            }
        }),
     ],
     ...
     providers: [
       ...
       CustomHttpProvider 
     ]

第一个错误

由于初始化了一个新的加载器实例，一切似乎都正常，除了它还实例化了它的依赖项（CustomHttpProvider），该配置对象不可用，并且出现了错误：

property config.webappServer.uri does not exist!

尝试的解决方案

为了解决这个问题，我尝试了带deps的useClass / useFactory以及  工厂方法来解析配置值

export function createWebappServerSingleton(http: HttpClient, config: CommonModuleConfig) {
    return new CommonHttpProvider(http, config);
}

export function createTranslateProvider(webappServer: CommonHttpProvider) {
    return new LanguageLoaderProvider(webappServer);
}

下面是配置翻译模块的各种尝试，我尝试了许多其他尝试，但仅举几个例子。

TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateProvider,
                deps: [{provide: CustomHttpProvider , useClass: CustomHttpProvider ,
                    deps: [HttpClient, commonModuleConfig]
                }]

            }
        }),

TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateProvider,
                deps: [{provide: CustomHttpProvider , useFactory: createWebappServerSingleton,
                    deps: [HttpClient, commonModuleConfig]
                }]

            }
        }),

无论我尝试什么，都会收到以下错误消息

No provider for [object Object]!

任何帮助将不胜感激。