Угловой 4 Нет поставщика для [объект объекта]! на TranslateModule с использованием провайдера из другого libray - PullRequest
Новая
       13

Угловой 4 Нет поставщика для [объект объекта]! на TranslateModule с использованием провайдера из другого libray

0 голосов
/ 13 марта 2019

У меня есть внешняя библиотека в надежде использовать общий код для нескольких приложений.Я хочу использовать приведенный ниже провайдер в моей общей библиотеке и добавить его в качестве переводчика для приложений-потребителей TranslateModule

В моей общей библиотеке у меня есть:

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

Общее объявление модуля

Этот модуль использует объект конфигурации для получения базы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!

Попытка решения

Чтобы решить эту проблему, я попытался использовать Class / useFactory с deps вместе с фабричным методом, чтобы разрешить значение конфигурации 

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]!

Любойпомощь будет очень признателен.

...