Trying to integrate ngrx/router-store with webpack HMR (hot module replacement)

[adrian-moisa]

Hello,

I am trying to extend this seed project to use ngrx/router-store and angular/router. It works ok until I try RouterStoreModule.connectRouter().

@NgModule({
    declarations: [
        TestComponent,
        RetestComponent,
        AppComponent
    ],
    imports: [
        AppRoutes,
        BrowserModule,
        provideHotStore({
            router: routerReducer,
            app: appReducer
        }),
        RouterStoreModule.connectRouter(),
        StoreDevtoolsModule.instrumentStore({ maxAge: 500 })
    ],
    bootstrap: [AppComponent]
})

When I run npm start i get the following error. Router seems to have loaded the /test route. Store seems to be working and dispatching actions. But if I do some code change error 1 leads to error 2:

Error 1

core.umd.js?e2a5:5995EXCEPTION: Cannot read property 'call' of undefinedErrorHandler.handleError @ core.umd.js?e2a5:5995(anonymous function) @ core.umd.js?e2a5:9394ZoneDelegate.invoke @ zone.js?fad3:192onInvoke @ core.umd.js?e2a5:8772ZoneDelegate.invoke @ zone.js?fad3:191Zone.run @ zone.js?fad3:85(anonymous function) @ zone.js?fad3:451ZoneDelegate.invokeTask @ zone.js?fad3:225onInvokeTask @ core.umd.js?e2a5:8763ZoneDelegate.invokeTask @ zone.js?fad3:224Zone.runTask @ zone.js?fad3:125drainMicroTaskQueue @ zone.js?fad3:357ZoneTask.invoke @ zone.js?fad3:297
core.umd.js?e2a5:6000ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js?e2a5:6000(anonymous function) @ core.umd.js?e2a5:9394ZoneDelegate.invoke @ zone.js?fad3:192onInvoke @ core.umd.js?e2a5:8772ZoneDelegate.invoke @ zone.js?fad3:191Zone.run @ zone.js?fad3:85(anonymous function) @ zone.js?fad3:451ZoneDelegate.invokeTask @ zone.js?fad3:225onInvokeTask @ core.umd.js?e2a5:8763ZoneDelegate.invokeTask @ zone.js?fad3:224Zone.runTask @ zone.js?fad3:125drainMicroTaskQueue @ zone.js?fad3:357ZoneTask.invoke @ zone.js?fad3:297
core.umd.js?e2a5:6001TypeError: Cannot read property 'call' of undefined
    at getLatestUrl (eval at 155 (http://localhost:8081/app.js:121:2), <anonymous>:89:46)
    at connectRouterActions (eval at 155 (http://localhost:8081/app.js:121:2), <anonymous>:93:76)
    at eval (eval at 155 (http://localhost:8081/app.js:121:2), <anonymous>:120:9)
    at eval (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9606:60)
    at Array.forEach (native)
    at ApplicationRef_._loadComponent (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9606:23)
    at ApplicationRef_.bootstrap (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9592:18)
    at eval (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9494:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9494:46)
    at eval (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:9462:31)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:192:28)
    at Object.onInvoke (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:8772:45)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:191:34)
    at Zone.run (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:85:43)
    at eval (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:451:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:225:37)
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:8081/vendor.js:102:2), <anonymous>:8763:45)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:224:42)
    at Zone.runTask (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:125:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:357:35)
    at HTMLDocument.ZoneTask.invoke (eval at <anonymous> (http://localhost:8081/polyfills.js:2674:2), <anonymous>:297:25)

Error 2

Uncaught TypeError: Cannot read property 'injector' of undefined(…)

Any ideas on how to fix this setup? Thanks!