title: i18n of lazy-loaded components in JHipster app
body: <p><a href="https://github.com/dancancro/great-big-example-application/blob/dashboard/src/main/webapp/app/app.module.ts#L55" rel="nofollow noreferrer">My App</a> is based on <a href="https://jhipster.github.io" rel="nofollow noreferrer">JHipster</a> and so the language services are provided by way of <a href="https://github.com/jhipster/ng-jhipster/blob/0f20f41153369fcd35525db23b66ebd3aaed64b8/src/language/language.service.ts#L29" rel="nofollow noreferrer">JhiLanguageService</a> in the <code>ng-jhipster</code> library which uses a <a href="https://github.com/jhipster/ng-jhipster/blob/0f20f41153369fcd35525db23b66ebd3aaed64b8/src/config.service.ts" rel="nofollow noreferrer">JhiConfigService</a> to configure <code>ngx-translate</code> without my needing to import and configure the TranslateModule in my <code>app.module</code>. So when I add <code>TranslateModule.forRoot(...)</code> to imports of AppModule, everything breaks and I just see "translation not found..." messages everywhere.</p>
  
  <p>I don't know how to make my lazy-loaded pages use the same translation service instance as the eager-loaded part of the app so that changing the language in an eagerly-loaded component of the nav bar affects the language used by the lazy-loaded pages.</p>
  
  <p>I have looked into <a href="https://github.com/akveo/ng2-admin/issues/1079#issuecomment-301707767" rel="nofollow noreferrer">this idea</a> and <a href="https://github.com/ngx-translate/core/issues/232#issuecomment-281455131" rel="nofollow noreferrer">this idea</a> but they both prescribe configuring TranslateModule in AppModule which breaks it and I don't know how to control ngx-translate configuration in a JHipster app.</p>