StoreDevtools error

[axtho]

Setup same as #29 ... I followed the docs more closely now. I get:

unhandled Promise rejection: Cannot read property 'asObservable' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'asObservable' of undefined
    at new StoreDevtools (store-devtools.es5.js:544)

The import section from the app.module.ts looks like this:

imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        FlexLayoutModule,

        AppMaterialModule,
        AppRoutingModule,
        MHCoreModule,

        StoreModule.forRoot(reducers),
        StoreRouterConnectingModule,
        !environment.prod ? StoreDevtoolsModule.instrument() : [],

        EffectsModule.forRoot(),
        EffectsModule.run(PersonEffects),
        EffectsModule.run(AuthEffects),

        CommonModule,
        SearchModule,
        InteractionModule
    ],

The reducer import like so (partial):

import {
    ActionReducerMap,
    createSelector } from '@ngrx/store';
import { routerReducer, RouterReducerState } from '@ngrx/router-store';

import * as interaction from 'mh-core';
import * as person from 'mh-core';
import * as settings from 'mh-core';
import * as auth from 'mh-core';

export interface AppState {
    interaction: interaction.InteractionState;
    person: person.PersonState;
    settings: settings.SettingsState;
    auth: auth.AuthState;
    router: RouterReducerState;
}

export const reducers: ActionReducerMap<AppState> = {
    interaction: interaction.interactionReducer,
    person: person.personReducer,
    settings: settings.settingsReducer,
    auth: auth.authReducer,
    router: routerReducer
};

[llwt]

Running into the same issue, you ever find a solution?

[axtho]

@llwt unfortunately not yet. I have reverted back to the 2.x branch because I don't have the time to debug alpha versions.

[llwt]

Hmm, so I think I tracked it down to the injector.get(StoreDevTools) call in createStateObservable of instrument.ts.

It looks the eager provider calling injector.get() winds up with the ActionSubject from @ngrx/store not being present in the DI container at the time of instantiation and injecting undefined into the StoreDevTools. Playing around with it, if I provide StoreDevTools and State to the createStateObservable factory deps everything works:

// ...
export function createStateObservable(shouldInstrument: boolean, devTools: StoreDevtools, state: State<any>) {
  return shouldInstrument ? devTools.state : state;
}
// ...
export class StoreDevtoolsModule {
  static instrument(options: StoreDevtoolsOptions = {}): ModuleWithProviders {
    return {
      ngModule: StoreDevtoolsModule,
      providers: [    
        // ...
        {
          provide: StateObservable,
          deps: [ SHOULD_INSTRUMENT, StoreDevtools, State],
          useFactory: createStateObservable
        },
        // ...

Although, If I'm understanding everything correctly though that leads to the StoreDevTools being bootstrapped regardless of whether SHOULD_INSTRUMENT is true.

I'm not sure what the correct solution to get this working would be. I have a feeling this issue is already understood by the project maintainers.

Probably related to: Angular #15501

[llwt]

So that actually doesn't work as expected. The dev tools work but all actions end up being fired twice...

[boneskull]

My WAG is that StoreModule isn't actually providing anything, because it's been split into StoreFeatureModule and StoreRootModule.

I'll try to test this hypothesis, but I'm new to the toolchain..

[boneskull]

n/m; there are a bunch of unused imports in the devtools code, so it's tough to determine intent or if things are half-implemented. I'm also an Angular 2+ noob, so can't be of much help here

[msandeeprao38]

@axtho @llwt Running into the same issue. Any solution for this as of now or is it better to revert back to 2.x versions

[axtho]

@msandeeprao38 I went back on 2.x for now. It doesn't seem a hight priority to get 4.x on the road soon :) Maybe @MikeRyanDev or @brandonroberts could guestimate on this?

[boneskull]

I also went back to 2.x; works well enough

[llwt]

Rolled back to 2.x here as well. An update on the status of this from @MikeRyanDev or @brandonroberts would be really helpful, the original ETA was "sometime in May"?

[boneskull]

You can always move that ETA up by contributing back to the project yourself.

[llwt]

@boneskull I'm trying :P see my earlier comments.

[drew-moore]

:-) This seems to be fixed as of today's "nightly" build (store-devtools-builds#c242ff2).

Thanks team!

[axtho]

@drew-moore yes? I just pulled the latest via "@ngrx/store-devtools": "github:ngrx/store-devtools-builds", and I still get the same error:

Unhandled Promise rejection: Cannot read property 'asObservable' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'asObservable' of undefined
    at new StoreDevtools (store-devtools.es5.js:544)
    at _createClass (core.es5.js:9615)
    at _createProviderInstance$1 (core.es5.js:9573)
    at resolveNgModuleDep (core.es5.js:9558)
    at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10644)
    at createStateObservable (store-devtools.es5.js:696)
    at _callFactory (core.es5.js:9637)
    at _createProviderInstance$1 (core.es5.js:9576)
    at initNgModule (core.es5.js:9527)
    at new NgModuleRef_ (core.es5.js:10635) TypeError: Cannot read property 'asObservable' of undefined
    at new StoreDevtools (http://localhost:4200/vendor.bundle.js:101813:52)
    at _createClass (http://localhost:4200/vendor.bundle.js:47765:26)
    at _createProviderInstance$1 (http://localhost:4200/vendor.bundle.js:47723:26)
    at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:47708:17)
    at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:4200/vendor.bundle.js:48794:16)
    at createStateObservable (http://localhost:4200/vendor.bundle.js:101965:40)
    at _callFactory (http://localhost:4200/vendor.bundle.js:47787:17)
    at _createProviderInstance$1 (http://localhost:4200/vendor.bundle.js:47726:26)
    at initNgModule (http://localhost:4200/vendor.bundle.js:47677:13)
    at new NgModuleRef_ (http://localhost:4200/vendor.bundle.js:48785:9)