How to use the @angular/platform-browser.makeStateKey function in @angular/platform-browser

import { BrowserModule, makeStateKey } from '@angular/platform-browser'
import { EnvironmentService } from './shared/services/environment.service'
import { ServerResponseService } from './shared/services/server-response.service'
import { Angulartics2Module } from 'angulartics2'
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
import { HTTP_INTERCEPTORS, HttpClientModule, HttpResponse } from '@angular/common/http'
import { GlobalErrorHandler } from './shared/services/error-handler.service'
import { SettingService } from './shared/services/setting.service'
import { AngularFireModule, FirebaseAppConfigToken, FirebaseAppName } from 'angularfire2'
import { AngularFireAuthModule } from 'angularfire2/auth'
import { AngularFireDatabaseModule } from 'angularfire2/database'
import { TransferHttpCacheModule } from '@nguniversal/common'
import { AuthService, FB_COOKIE_KEY } from './shared/services/auth.service'
import { CACHE_TAG_CONFIG, CACHE_TAG_FACTORY, CacheTagConfig, HttpCacheTagModule } from './shared/http-cache-tag/http-cache-tag.module'

export const REQ_KEY = makeStateKey('req')

export function metaFactory(env: EnvironmentService, ss: SettingService): MetaLoader {
  const locale = 'en' // TODO: make this dynamic
  const urlKey = 'host'
  return new MetaStaticLoader({
    callback: (key: string) => {
      if (key && key.includes(urlKey)) {
        return key.replace(urlKey, env.config.host)
      }
      return (key.includes('i18n')
        ? ss.pluck(key.replace('i18n', `i18n.${locale}`))
        : ss.pluck(key)).map(a => a ? a : '')
    },
    pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
    pageTitleSeparator: ' - ',
    applicationName: 'og.title',

this.zone.run(() => { // Back in Angular's zone
                const res = snapshot.val()
                const projected = Object.keys(res || {}).map(key => ({ ...res[key], id: key }))
                this.ts.set(makeStateKey(`FB.${path}`), projected)
                resolve(projected)
                setTimeout(() => {
                  // Maybe getting the data will result in more components to the view that need related data.
                  // 20ms should be enough for those components to init and ask for more data.
                  clearTimeout(timeout)
                }, 20)
              })
            }, (err: any) => {

it('should fetch request if not previoulsy cached and cache result', async(() => {
    expect.assertions(3)
    http.get('http://www.google.com/api/thing/1').take(1).subscribe(res => expect(res).toEqual({ hello: 'world' }))
    const req = httpMock.expectOne(r => r.url === 'http://www.google.com/api/thing/1')
    expect(req.request.method).toEqual('GET')
    req.flush({ hello: 'world' })
    httpMock.verify()
    const cachedVal = transferState.get(makeStateKey('http://www.google.com/api/thing/1_GET'), {})
    expect((cachedVal as any).body).toEqual({ hello: 'world' })
  }))

childRemoved(ref: string): BehaviorSubject | Observable {
    const dataStateKey = makeStateKey(ref);
    if (this.server) {
      return this.SRH(ref, dataStateKey);
    }
    if (this.browser) {
      return this.BRH(ref, 'child_removed', dataStateKey);
    }
  }

cacheKey(path: string) {
    return makeStateKey(`${this.prefix}.${path}`)
  }
}

return Observable.create((observer) => {
      const jsonData: any = JSON.parse(
        fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8'),
      );
      const key: StateKey = makeStateKey(`transfer-translate-${lang}`);
      this.transferState.set(key, jsonData);
      observer.next(jsonData);
      observer.complete();
    });
  }

public getTranslation(lang: string): Observable {
    const key: StateKey = makeStateKey(`transfer-translate-${lang}`);
    const data: any = this._transferState.get(key, null);
    if (data) {
      return Observable.create(observer => {
        observer.next(data);
        observer.complete();
      });
    }
    return new TranslateHttpLoader(this._http, this._prefix, this._suffix).getTranslation(lang);
  }
}

import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
import { PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';

import { AppComponent } from './app.component';
import { routes } from './app.routes';
import { AnalyticsModule } from './framework/analytics';
import { configFactory, CoreModule, metaFactory, SharedModule } from './framework/core';
import { HttpInterceptorModule } from './framework/http';
import { ChangeLanguageComponent, I18NModule, translateFactory } from './framework/i18n';
import { MaterialModule } from './framework/material';
import { HeaderComponent } from './layout/header.component';
import { MainComponent } from './layout/main.component';
import { LoginComponent } from './login/login.component';
import { StoreModule } from './store';

export const REQ_KEY = makeStateKey('req');

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { suppressScrollX: true };

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app-id' }),
    TransferHttpCacheModule,
    RouterModule.forRoot(routes),
    PerfectScrollbarModule,
    AnalyticsModule.forRoot([
      {
        provide: ANGULARTICS2_TOKEN,
        useValue: {
          providers: [Angulartics2GoogleAnalytics],
          settings: {}
        }

removeItem(key: string, locations: StorageLocation[] = ['local', 'session', 'memory']) {
        const stateKey = makeStateKey(key);
        if (this._transferState.hasKey(stateKey)) {
            this._transferState.remove(stateKey);
        }
        for (let i=0; i < locations.length; i++) {
            const loc = locations[i];
            if (loc === 'local' && this._supportsLocal) {
                this.removeLocal(key);
            } else if (loc === 'session' && this._supportsSession) {
                this.removeSession(key);
            } else if (loc === 'memory') {
                this.removeInMem(key);
            }
        }
    }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import 'rxjs/add/operator/toPromise';

import { Pokemon } from './pokemon';

const POKEMONS_KEY = makeStateKey('pokemons');
const POKEMON_DETAILS_KEY = makeStateKey('pokemon_details');

@Injectable()
export class PokemonService {

  private baseUrl: string = 'https://pokeapi.co/api/v2';

  constructor(private http: HttpClient,
    private state: TransferState) { }

  listPokemons() {
    let pokemons = this.state.get(POKEMONS_KEY, null as any);
    if (pokemons) {
      return Promise.resolve(pokemons);
    }

    return this.http.get(`${this.baseUrl}/pokedex/1/`)