Javascript 角度-来自服务的翻译提供程序映射不正确

我在服务中有这个-

I18nProviderService

：

createTranslationProviders(response) {
  const locale = 'de';
  let translationProvider: any;
  translationProvider = [{
      provide: TRANSLATIONS,
      useValue: response
    },
    {
      provide: TRANSLATIONS_FORMAT,
      useValue: 'xlf'
    },
    {
      provide: LOCALE_ID,
      useValue: locale
    }
  ];

  return translationProvider;
}

getTranslationProvider() {

  this.getTranslationFile()
    .subscribe(
      (response: Response) => this.createTranslationProviders(response),
      (error) => console.log(error)
    );
}

这在我的

app.module.ts中

export function startupServiceFactory(myService: I18nProviderService): Function {
  return () => myService.getTranslationProvider();
}



@NgModule({
  declarations: [

  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    NguiAutoCompleteModule
  ],
  providers: [I18nProviderService,
    {
      provide: APP_INITIALIZER,
      useFactory: (myService: I18nProviderService) => () => myService.getTranslationProvider(),
      deps: [I18nProviderService],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

为什么
TRANSLATIONS\u格式
、
LOCALE\u ID
和
TRANSLATIONS
映射不正确。意味着，如果我在我的
app.component.ts
中跟踪
LOCALE\u ID
，它具有默认值。。不是“德”。我喜欢在应用程序启动之前加载我的xlf翻译文件。
您不想
。在您的服务中订阅
。该代码属于消费组件。最好是在
OnInit
上，并使用
ondestory
发布订阅，以防止泄漏。您应该从
getTranslationProvider
返回
Promise
，并且不能以这种方式声明提供程序。请看，我创建了一个plunker：但是我的新本地id没有设置