kobvel

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzaSyBjsEXmLI-4kOcz793QZh9ElN_iSHlO74M",
    authDomain: "ng-firebase-dev.firebaseapp.com",
    databaseURL: "https://ng-firebase-dev.firebaseio.com",
    projectId: "ng-firebase-dev",
    storageBucket: "ng-firebase-dev.appspot.com",
    messagingSenderId: "644800494252"
  }

kobvel

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { environment } from 'environments/environment';
import { AppComponent } from './app.component';

kobvel

import { OnInit, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IProfileData } from './profile.model';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

kobvel

import { Store } from '@ngrx/store';
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { IAppState } from './app.state';
import * as profileActions from './profile/profile.actions'
import { IProfileData } from './profile/profile.model';
import { ApiService } from './api.service';

kobvel

import { Routes } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import { ProfileResolver } from './profile.resolver';

export const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    resolve: { profileData: ProfileResolver }
  }

kobvel

import { StoreModule } from '@ngrx/store';
import { storeReducers } from './app.state';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    StoreModule.forRoot(storeReducers),
    AppModule
  ],

kobvel

import { ActionReducerMap } from '@ngrx/store';

import * as fromProfile from '../..../profile/profile.reducer';

// Our top level state interface is just a map of keys to inner state types.
export interface IAppState {
  profileData: fromProfile.IProfileState;
}

const reducers = {

kobvel

import { Action } from '@ngrx/store';

export interface IProfileActions {
  PROFILE_DATA_UPDATED: string;
}

export const ActionTypes: IProfileActions = {
  PROFILE_DATA_UPDATED: 'Profile Data Updated',
};

kobvel

import { Store } from '@ngrx/store';
import * as actions from './profile.actions';

export interface IProfileState {
  // define interface for data you expect to get from server
  // or just set type to any
  profileData: IProfileData; 
}

export const initialState: IProfileState = {

kobvel

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';
import { ApiService } from '../../shared/api.service';

@Component()
export class ProfileComponent implements OnInit, OnDestroy {

  public profileData$: Subscription;
  public data;