JurajMlich

Angular 7 Hot reload + Ngrx

There are several articles on this topic, yet neither of them is clear enough / updated with the newest technologies. That is the reason why I have decided to write the following tutorial how to properly set everything up:

---

NEEDED PACKAGES

There are several packages we are going to need:

JurajMlich

"hmr":{  
      "fileReplacements":[  
         {  
            "replace":"src/environments/environment.ts",
            "with":"src/environments/environment.hmr.ts"
         }
      ]
   }

JurajMlich

import {ActionReducer, ActionReducerMap, MetaReducer} from '@ngrx/store';
import {State} from './root.state';
import {environment} from '../../environments/environment';

export const rootReducers: ActionReducerMap<State> = {
  // YOUR REDUCERS HERE
};


export const rootMetaReducers: MetaReducer<State>[] = [];

JurajMlich

import {BrowserModule} from '@angular/platform-browser';
import {ApplicationRef, NgModule, NgModuleFactoryLoader} from '@angular/core';
import {createInputTransfer, createNewHosts, removeNgStyles} from '@angularclass/hmr';


import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {Store, StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {environment} from '../environments/environment';

JurajMlich

export const environment = {
  production: false,
  hmr: true
};

import 'zone.js/dist/zone-error';  // Included with Angular CLI.

JurajMlich

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
import {hmrModule, bootloader} from '@angularclass/hmr';

if (environment.production) {
  enableProdMode();
}