title: Angular - TransferState - page is loading twice (flickering)
body: <p>I have a little problem with Angular 5.2.10 <code>TransferState</code> module. Currently I'm using Angular Universal (latest version) to make my site SEO friendly. Everything is working fine except one thing... Page is loading first - on server side, then content disappear and load on browser side (screen).</p>
  
  <p><a href="https://i.stack.imgur.com/OdTrN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OdTrN.png" alt="blink"></a></p>
  
  <p>I've created service for <code>TransferState</code> implementation (you can see it below).</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import "rxjs/add/operator/map";
  import 'rxjs/add/observable/of';
  import 'rxjs/add/operator/share';
  import { Observable } from 'rxjs/Observable';
  import { TransferState, makeStateKey, DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  interface pageData {
      banner: string;
      data: any;
      html: SafeHtml;
      text: string;
      title: string;
  }
  
  @Injectable()
  export class ServerService {
      constructor(private http: HttpClient, private state: TransferState, private sanitizer: DomSanitizer) { }
  
      getResponse(url): Observable&lt;any&gt; {
          url = makeStateKey&lt;Promise&lt;any&gt;&gt;(url);
  
          let temp = this.state.hasKey(url);
          if (!temp)
              return this.http.get&lt;any&gt;(url).map(
                  (response: any) =&gt; {
                      let data = response;
                      this.state.set(url, data);
                      return data;
                  }
              ).share();
          else {
              return Observable.of(this.state.get(url, null as Observable&lt;any&gt;));
          }
      }
  
      async getResponseAsync(url): Promise&lt;any&gt; {
          let temp = await this.state.hasKey(url);
          url = makeStateKey&lt;Promise&lt;any&gt;&gt;(url);
  
          if (!await temp)
              return this.http.get&lt;any&gt;(url).toPromise().then(
                  async (response: any) =&gt; {
                      await this.state.set(url, await response);
                      return await response;
                  }
              );
          else {
              return await this.state.get(url, null as Promise&lt;any&gt;)
          }
      }
      }
  </code></pre>
  
  <p>I've also tried solution with <code>TransferHttpCacheModule</code>, but problem remains.</p>
  
  <p>main.ts</p>
  
  <pre><code>import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch(err =&gt; console.log(err));
  });
  </code></pre>
  
  <p>app.server.module.ts</p>
  
  <pre><code> import { NgModule } from '@angular/core';
  import { ServerModule, ServerTransferStateModule } from "@angular/platform-server";
  import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  import { NoopAnimationsModule } from '@angular/platform-browser/animations'; 
  
  
  @NgModule({
    imports: [
      AppModule,
      ServerModule,
      ServerTransferStateModule,
      ModuleMapLoaderModule,
      NoopAnimationsModule,
    ],
    providers: [],
    bootstrap: [ AppComponent ],
  })
  export class AppServerModule {}
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>// Core
  import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
  import { ServiceWorkerModule } from '@angular/service-worker';
  import { FormsModule, ReactiveFormsModule, NgForm } from '@angular/forms';
  import { NgForageModule, NgForageConfig, NgForageOptions } from "ngforage";
  import { NgProgressModule } from '@ngx-progressbar/core';
  
  // Config
  import { Config } from './config';
  
  
  // Compontents
  import { AppComponent } from './app.component';
  import { ContainerComponent } from './components/container/container.component'
  
  
  import { ContainerModule } from './components/container/container.module'
  
  
  // Environment
  import { environment } from '../environments/environment';
  import { NotfoundComponent } from './components/notfound/notfound.component';
  import { NotfoundModule } from './components/notfound/notfound.module';
  
  
  
  const routes: Routes = [
    {
      path: '',
      pathMatch: 'full',
      redirectTo: '/pl'
    },
  
    {
      path: 'pl/home',
      redirectTo: 'pl'
    },
    {
      path: '404',
      component: NotfoundComponent
    },
    {
      path: ':lang',
      component: ContainerComponent
    },
    {
      path: ':lang/:index',
      component: ContainerComponent,
    },
      {
      path: '**',
      redirectTo: '404'
    }
  
  ];
  
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      RouterModule.forRoot(routes, { initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules }),
      BrowserModule.withServerTransition({ appId: 'main-app' }),
      BrowserTransferStateModule,
      ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
      BrowserAnimationsModule,
      NgProgressModule.forRoot(),
      NgForageModule.forRoot(),
      ContainerModule,
      NotfoundModule,
    ],
    providers: [
      Config
    ],
    bootstrap: [AppComponent]
  })
  
  
  
  export class AppModule{
    constructor(ngfConfig: NgForageConfig) {
      ngfConfig.configure({
        name: 'apiDB',
        driver: [ // defaults to indexedDB -&gt; webSQL -&gt; localStorage -&gt; sessionStorage
          NgForageConfig.DRIVER_INDEXEDDB,
          NgForageConfig.DRIVER_LOCALSTORAGE
        ]
      });
    }
  }
  </code></pre>
  
  <p>Example repo you can see <a href="https://github.com/patrykp57/angular-sample/" rel="noreferrer">there</a> (some components are out of date - most important modules you have above)</p>
  
  <p>Do you know how to fix that issue ? Or it's core bug, and I have to wait for fixes ? </p>
  
  <p>Page blink, after inserting state node in document tree (this one marked below main-app-state )</p>
  
  <p><a href="https://i.stack.imgur.com/atsIr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/atsIr.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit</strong>
  It's not Service Worker issue also, I've tried to turn it off and still the same.</p>
  
  <p>Github issue <a href="https://github.com/angular/angular/issues/23427" rel="noreferrer">here</a></p>