app.browser.module.ts

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { Store, StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

// for AoT we need to manually split universal packages (/browser & /node)
import { UniversalModule, isBrowser, isNode } from 'angular2-universal/browser';

// Main "APP" Root Component
import { AppComponent, ROUTES, appReducer } from 'app';

// Component imports
import { NavMenuComponent } from 'app-components';

// Container (aka: "pages") imports
import {
    HomeComponent,
    RestTestComponent,
    BootstrapComponent,
    LoginComponent
} from 'app-containers';

// Provider (aka: "shared" | "services") imports
import {
    HttpCacheService, CacheService // Universal : XHR Cache
} from 'app-shared';

//////////////////////////////////////////////////////////////////

// This imports the variable that, in a hot loading situation, holds
// a reference to the previous application's last state before
// it was destroyed.
import { appState } from 'app';

export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        RestTestComponent,
        HomeComponent,
        LoginComponent,
        BootstrapComponent
    ],
    providers: [
        { provide: 'isBrowser', useValue: isBrowser },
        { provide: 'isNode', useValue: isNode },
        CacheService,
        HttpCacheService
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.

        // Here we can import other stuff
        // Even make it dynamic whether it's for Browser or Server (Dependency Injection)
        // isBrowser ? something : somethingElse, <- basic pseudo example

        // NgRx
        StoreModule.provideStore(appReducer, appState),
        EffectsModule,
        StoreDevtoolsModule.instrumentOnlyWithExtension(),

        // Angular
        FormsModule,
        ReactiveFormsModule,
        Ng2BootstrapModule,

        // Routing
        RouterModule.forRoot(ROUTES)
    ]
})
export class AppModule {
    constructor(public cache: CacheService) {
        // TODO(gdi2290): refactor into a lifecycle hook
        this.doRehydrate();
    }

    doRehydrate() {
        let defaultValue = {};
        let serverCache = this._getCacheValue(CacheService.KEY, defaultValue);
        this.cache.rehydrate(serverCache);
    }

    _getCacheValue(key: string, defaultValue: any): any {

        console.log('Universal Cache for key :: ' + key);
        console.log(window[UNIVERSAL_KEY]);

        // browser
        const win: any = window;
        if (win[UNIVERSAL_KEY] && win[UNIVERSAL_KEY][key]) {
            let serverCache = defaultValue;
            try {
                serverCache = JSON.parse(win[UNIVERSAL_KEY][key]);
                if (typeof serverCache !== typeof defaultValue) {
                    console.log('Angular Universal: The type of data from the server is different from the default value type');
                    serverCache = defaultValue;
                }
            } catch (e) {
                console.log('Angular Universal: There was a problem parsing the server data during rehydrate');
                serverCache = defaultValue;
            }
            return serverCache;
        } else {
            console.log('Angular Universal: UNIVERSAL_CACHE is missing');
        }
        return defaultValue;
    }
}