app.module.ts

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';
import {rootMetaReducers, rootReducers, RootState} from './root-store';
import {StoreRouterConnectingModule} from '@ngrx/router-store';
import {take} from 'rxjs/operators';
import {RouterExtService} from './misc/router.extension';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'app'}),,
    StoreModule.forRoot(rootReducers, {metaReducers: rootMetaReducers}),
    EffectsModule.forRoot([RootEffects]),
    true || !environment.production ? StoreDevtoolsModule.instrument({
      maxAge: 25
    }) : [],
    // StoreRouterConnectingModule.forRoot({stateKey: 'router'}),
    SharedModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    RouterExtService,
  ],
  bootstrap: [AppComponent]
})


export class AppModule {
  constructor(
    public appRef: ApplicationRef,
    public store: Store<RootState.State>
  ) {
  }

  hmrOnInit(store) {
    if (!store || !store.state) {
      return;
    }
    console.log('HMR store', store);
    console.log('store.state:', store.state);

    this.store.dispatch({
      type: 'SET_ROOT_STATE',
      payload: store.state
    });

    if ('restoreInputValues' in store) {
      const restore = store.restoreInputValues;
      setTimeout(() => restore(), 500);
    }
    // change detection
    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }

  hmrOnDestroy(store) {
    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // inject your AppStore and grab state then set it on store
    this.store.pipe(take(1)).subscribe(s => store.state = s);
    store.state = Object.assign({}, store.state);
    // save input values
    store.restoreInputValues = createInputTransfer();
    // remove styles
    removeNgStyles();
  }

  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
    // anything you need done the component is removed
  }
}

I got it working, just more fumbling than I'd like. It's a helpful tutorial. Getting this up and running is kind of stupid, it feels like it should have native angular support to just turn it on, rather than having to devise an implementation.

…

On Tue, Aug 13, 2019, 11:45 PM Juraj Mlich ***@***.***> wrote: @Prinsn <https://github.com/Prinsn> will include them in a few hours, sorry about that — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/58ed66bb0843afc7ac969a90a77eceba?email_source=notifications&email_token=AAYR7G3XCMVUC5BHX4SHU6TQEN5W3A5CNFSM4ILNXKE2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFW7OW#gistcomment-2997995>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAYR7G3QB6PBASBUERZCJJLQEN5W3ANCNFSM4ILNXKEQ> .

Great to hear that, but ngrx is not part of native angular, so there's not much they can do about it, I'm afraid. But a guide on the ngrx website would be greatly appreciated, that I think we can definitely agree on.

I was speaking more to the amount of hoops to jump through just for HMR.

Also, I think you have partially obfuscated code at import {rootMetaReducers, rootReducers, RootState} from './root-store'; as that's local code. I don't think you've exposed the RootState anywhere.

I have it working with an empty interface as per the default reducer generation, not sure if it requires anything beyond just an object.