I know this is necromancy ;P But for some this still might be useful.
TL;DR
What you missed from angular-class HMR was quite likely metareducer for setting the complete state.
Below is how I implemented HMR with link to example from which I derived this https://github.com/gdi2290/angular-hmr
Metareducer
First you need a metareducer to handle setting whole state.
// make sure you export for AoT
export function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
return function(state: any, action: any) {
if (action.type === 'SET_ROOT_STATE') {
return action.payload;
}
return reducer(state, action);
};
}
let _metaReducers: MetaReducer<fromRoot.State, any>[] = [];
if (environment.hmr) {
_metaReducers = [stateSetter];
}
export const metaReducers = _metaReducers;
When registering StoreModule.forRoot for NgModule remember to register that metareducer array.
StoreModule.forRoot(reducers, { metaReducers })
AppModule
For the AppModule you need to define hmrOnInit , hmrOnDestroy & hmrAfterDestroy methods.
- hmrOnInit loads the state
- hmrOnDestroy writes the state ( note ngrx store.take(1) is really
synchronous it's listed somewhere in the ngrx github issues, can't seem to find where atm ).
- hmrAfterDestroy cleans up existing component elements
export class AppModule {
constructor(
private appRef: ApplicationRef,
private store: Store<fromRoot.State>
) { }
public hmrOnInit(store) {
if (!store || !store.state) {
return;
}
// restore state
this.store.dispatch({ type: 'SET_ROOT_STATE', payload: store.state });
// restore input values
if ('restoreInputValues' in store) {
const restoreInputValues = store.restoreInputValues;
// this isn't clean but gets the job done in development
setTimeout(restoreInputValues);
}
this.appRef.tick();
Object.keys(store).forEach(prop => delete store[prop]);
}
public hmrOnDestroy(store) {
const cmpLocation = this.appRef.components.map(
cmp => cmp.location.nativeElement
);
let currentState: fromRoot.State;
this.store.take(1).subscribe(state => (currentState = state));
store.state = currentState;
// recreate elements
store.disposeOldHosts = createNewHosts(cmpLocation);
// save input values
store.restoreInputValues = createInputTransfer();
// remove styles
removeNgStyles();
}
public hmrAfterDestroy(store) {
// display new elements
store.disposeOldHosts();
delete store.disposeOldHosts;
}
}
For more specific information see https://github.com/gdi2290/angular-hmr
