title: Ngx translate with shared/lazy loading modules
body: <p>Probably one of the most common questions, while the <a href="https://github.com/ngx-translate/core#1-import-the-translatemodule" rel="noreferrer">documentation</a> and some <a href="https://stackoverflow.com/questions/50992232/ngx-translate-not-showing-any-text-in-lazy-loaded-module">other questions</a> I found try to clear up things for me, yet I am still not sure how to fix this.</p>
  
  <p>So this is my structure:</p>
  
  <p><a href="https://i.stack.imgur.com/M8aN9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M8aN9.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>App module is of course the main module that is bootstrapped</li>
  <li>Countryselector module: takes care of loading the default country(based on IP) and takes care of deciding what language to use based on the browser. It basically is the core functionality of deciding what country/language is used + it contains a dropdown for a user to change the country/language. </li>
  <li>Checkout module, selection module, payment module are all lazy-loaded with routing.</li>
  </ul>
  
  <p><strong>AppModule</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
  }
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      HttpClientModule,
      BrowserModule,
      AppRoutingModule,
      ContrySelectorModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    export class AppModule { }
  </code></pre>
  
  <p><strong>CountrySelectorModule</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    declarations: [CountryselectorComponent],
    imports: [
      CommonModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    exports: [
      CountryselectorComponent
    ]
  })
  export class ContrySelectorModule { }
  </code></pre>
  
  <p><strong>Selection module:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    declarations: [SelectionComponent],
    imports: [
      CommonModule,
      SelectionRoutingModule,
      UspblockModule,
      TranslateModule.forChild({//or forRoot, no idea how to configure this
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }})
    ],
  })
  export class SelectionModule { }
  </code></pre>
  
  <p>Now the problem is that I don't want to do the language configuration again within the lazy-loaded modules, because the country selector module already takes care of this. I am not sure now how to correctly configure the lazy-loaded modules (and actually not sure if countrySelectorModule is done correctly). Using the <a href="https://github.com/ngx-translate/core#1-import-the-translatemodule" rel="noreferrer">standard github documentation</a> I was not able to pull this off. I've tried messing around with <code>.forChild()</code> but no luck so far.</p>
  
  <p>Do I need a share module? Do I need to import countrySelectorModule everywhere (not preferred)? Custom loader? t.b.h. I have no idea and the documentation is a bit short for more advanced scenarios.</p>