title: Angular 9 ngx-translate universal how to load translations before app is loaded?
body: <p>I have angular universal + pwa + ngx-translate app and now I have a little glitch/bug. When i load my app i can see for like 300-500ms all untranslated texts (keys) like <code>common.back</code>, <code>common.next</code>and then they change to translation values like <strong>next</strong> and <strong>back</strong>. </p>
  
  <p><strong>How to load translation before page load on angular universal ?</strong> </p>
  
  <p>This is my setup : </p>
  
  <p><strong>app.module :</strong> </p>
  
  <pre><code>export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  imports: [
  ...
      TransferHttpCacheModule,
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
        }
      }),
  ...
  ]
  </code></pre>
  
  <p><strong>app.server.module :</strong> </p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [
      AppModule,
      ServerModule,
      ServerTransferStateModule,
      BrowserModule.withServerTransition({ appId: 'autorent' }),
    ],
    bootstrap: [AppComponent],
  })
  export class AppServerModule { }
  </code></pre>
  
  <p><strong>app.browser.module :</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
  
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      AppModule,
      BrowserModule.withServerTransition({ appId: 'autorent' }),
      BrowserTransferStateModule,
      ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
      BrowserAnimationsModule
    ],
    bootstrap: [AppComponent],
  })
  export class AppBrowserModule { }
  </code></pre>
  
  <p>If you need another info, which I doubt, just write in comments and I will provide.</p>