title: ngx-translate how to isolate translate service
body: <p>my goal is to import a module with another component into my angular application. The imported module can be used in various applications and should also support different languages. When importing the module into an angular project, the developer shouldn't have to care about the translation files and for that, I imported the TranslateModule from <code>ngx-translate</code> into this child module, with the following configuration: </p>
  
  <pre><code>import {ModuleWithProviders, NgModule, Optional, SkipSelf} from '@angular/core';
  import {HttpClient, HttpClientModule} from '@angular/common/http';
  import {RouterModule, Routes} from '@angular/router';
  import { LoginMaskComponent } from './login/login.component';
  import { SettingsComponent } from './settings/settings.component';
  import {ValidationGuard} from './validation.guard';
  import {OtLoginServiceConfiguration} from './ot-login.service';
  import {CommonModule} from '@angular/common';
  import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
  import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  
  const LOGIN_ROUTES: Routes = [
    { path: 'login', component: LoginMaskComponent },
    { path: 'settings', component: SettingsComponent, canActivate: [ValidationGuard] }
  ];
  
  @NgModule({
    declarations: [
      LoginMaskComponent,
      SettingsComponent
    ],
      imports: [
          RouterModule.forChild(LOGIN_ROUTES),
          HttpClientModule,
          TranslateModule.forChild({
            loader: {
              provide: TranslateLoader,
              useFactory: (createTranslateLoader),
              deps: [ HttpClient ]
            },
            isolate: true
          }),
          CommonModule
      ],
    exports: [
      LoginMaskComponent,
      SettingsComponent
    ]
  })
  
  export class OtLoginModule {}
  
  export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/login/');
  }
  
  </code></pre>
  
  <p>Wihtin the angular project, where this child module is used, the TranslateModule configuration looks like this:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { OtLoginModule } from 'ot-login';
  import {HttpClient, HttpClientModule} from '@angular/common/http';
  import {TranslateHttpLoader} from '@ngx-translate/http-loader';
  import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [ HttpClient ]
        },
        isolate: true
      }),
      OtLoginModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/');
  }
  
  </code></pre>
  
  <p>But now I still face the problem, that the translations of the angular applications are gonna used, but not the translations of the child module. What am I doing wrong? Can someone help me?</p>