Platform: StoreDevtools error

Created on 26 May 2017  路  37Comments  路  Source: ngrx/platform

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
};

Most helpful comment

any update? I ran into this issue too, it is painful without dev tools around

All 37 comments

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

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

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

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

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..

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

@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

@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?

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

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"?

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

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

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

Thanks team!

@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)

@axtho try pulling the latest store build too

@drew-moore I am upgrading all my deps each day :) So that's not it ... what is your setup (npm, angular, TS, etc)?

I think it is what @MikeRyanDev has already mentioned in the new example app:

Both @ngrx/store and @ngrx/store-devtools now have mixed eager providers making it hard to debug undefined injector errors, see angular/angular#15501

But I am still curious why it seems to work for some and for others not. Does it have to do with how many eager providers are already setup before dev tools kick in?

Just to confirm the previous inspection:

action$ is undefined and therefore fails the toObservable() call.
bildschirmfoto 2017-06-13 um 07 56 42

Call stack:
bildschirmfoto 2017-06-13 um 07 57 18

BTW:
including the StoreDevtoolsModule.instrument() in the imports BEFORE the StoreModul will at least not error. But it also does not pick up a connection.

I also have an error with latest nightly builds:

zone.js:569 Unhandled Promise rejection: Cannot read property 'lift' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'lift' of undefined
    at observeOn (observeOn.js:57)
    at new State (store.es5.js:273)

@bbaia I am certain that has to do with the above mentioned open ticket on angular (angular/angular#15501). We seem to get errors on different points, which makes sense when you think about eager loading to be the issue: it depends on your specific setup, how many modules are being loaded by the time the devtools kick in.

I'm using lazy features modules

any update? I ran into this issue too, it is painful without dev tools around

app.module.ts works

imports: [
    BrowserModule,
    StoreModule.forRoot({ core: coreReducer }),
    StoreDevtoolsModule.instrument()
]

core.module.ts which is imported by app.module.ts fires the error descriped above.

app.module.ts

imports: [
    BrowserModule,
    CoreModule
]

core.module.ts

imports: [
    CommonModule,
    StoreModule.forRoot({ core: coreReducer }),
    StoreDevtoolsModule.instrument()
]

Everything works fine, if i do not import StoreDevtoolsModule.

@robwormald @MikeRyanDev is there another solution to this beside waiting for the issue at angular to be resolved? It is quite painful without the dev tools.

@axtho meanwhile u can log the actions: action$.subscribe(a => console.log(a))

@axtho have you tried the method above of putting the devtools and store in the AppModule

@brandonroberts if you look at the appModule snippet at the start of the issue you see that it is what I am doing. Currently I am not lazy loading any store stuff or putting it into a common module.

https://github.com/digitaldeacon/memberhive2/blob/master/web/src/app/app.module.ts#L49

Looking at the error it says that actions are undefined. Is that because the actions have not loaded by the time the devtools connect?

@brandonroberts @axtho Also seeing this error when importing StoreDevtoolsModule only in the App module.

Latest build works like a charm!

Thanks!

@brandonroberts thanks for doing this despite the holiday ;) it works now.

But it really slow down the app, normal ?

yes, i also noticed that ... maybe that has to do with the subscription not being closed properly?

Leaving the devtools will slow down your app as it's retaining all the actions and states by default. You can use the maxAge option to limit the number of states retained.

StoreDevtoolsModule.instrument({
  maxAge: 25
})

I'm actually getting this error even with the latest build. Same structure: DevTools imported in app.module.

Note: the store is a separate module imported in AppModule (I use https://github.com/kmathy/ngx-reduxor)

Error still present, what's the main workaround ? Should I go down to some version?

polyfills.js:3 Unhandled Promise rejection: Cannot read property 'schedule' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'schedule' of undefined at ObserveOnSubscriber.scheduleMessage (vendor.js:68582) at ObserveOnSubscriber._error (vendor.js:68588) at ObserveOnSubscriber.Subscriber.error (vendor.js:25306) at ActionsSubject.Observable._trySubscribe (vendor.js:19897) at ActionsSubject.Subject._trySubscribe (vendor.js:28785) at ActionsSubject.Observable.subscribe (vendor.js:19880) at ObserveOnOperator.call (vendor.js:68558) at AnonymousSubject.Observable.subscribe (vendor.js:19877) at WithLatestFromOperator.call (vendor.js:121278) at AnonymousSubject.Observable.subscribe (vendor.js:19877) TypeError: Cannot read property 'schedule' of undefined at ObserveOnSubscriber.scheduleMessage (http://localhost:8100/build/vendor.js:68582:33) at ObserveOnSubscriber._error (http://localhost:8100/build/vendor.js:68588:14) at ObserveOnSubscriber.Subscriber.error (http://localhost:8100/build/vendor.js:25306:18) at ActionsSubject.Observable._trySubscribe (http://localhost:8100/build/vendor.js:19897:18) at ActionsSubject.Subject._trySubscribe (http://localhost:8100/build/vendor.js:28785:51) at ActionsSubject.Observable.subscribe (http://localhost:8100/build/vendor.js:19880:93) at ObserveOnOperator.call (http://localhost:8100/build/vendor.js:68558:23) at AnonymousSubject.Observable.subscribe (http://localhost:8100/build/vendor.js:19877:22) at WithLatestFromOperator.call (http://localhost:8100/build/vendor.js:121278:23) at AnonymousSubject.Observable.subscribe (http://localhost:8100/build/vendor.js:19877:22)

@siordache94 if you can provide a reproduction, open a new issue so we can take a look. This has been resolved for some time.

I'm also facing the similar issue

zone.js:680 Unhandled Promise rejection: Cannot read property 'schedule' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'schedule' of undefined
    at ObserveOnSubscriber.scheduleMessage (observeOn.js:99)
    at ObserveOnSubscriber._error (observeOn.js:105)
    at ObserveOnSubscriber.Subscriber.error (Subscriber.js:105)
    at ActionsSubject.Observable._trySubscribe (Observable.js:177)
    at ActionsSubject.Subject._trySubscribe (Subject.js:97)
    at ActionsSubject.Observable.subscribe (Observable.js:160)
    at ObserveOnOperator.call (observeOn.js:74)
    at AnonymousSubject.Observable.subscribe (Observable.js:157)
    at WithLatestFromOperator.call (withLatestFrom.js:70)
    at AnonymousSubject.Observable.subscribe (Observable.js:157) TypeError: Cannot read property 'schedule' of undefined
    at ObserveOnSubscriber.scheduleMessage (webpack-internal:///./node_modules/rxjs/_esm5/operators/observeOn.js:105:33)
    at ObserveOnSubscriber._error (webpack-internal:///./node_modules/rxjs/_esm5/operators/observeOn.js:111:14)
    at ObserveOnSubscriber.Subscriber.error (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:110:18)
    at ActionsSubject.Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/Observable.js:177:18)
    at ActionsSubject.Subject._trySubscribe (webpack-internal:///./node_modules/rxjs/Subject.js:97:51)
    at ActionsSubject.Observable.subscribe (webpack-internal:///./node_modules/rxjs/Observable.js:160:93)
    at ObserveOnOperator.call (webpack-internal:///./node_modules/rxjs/_esm5/operators/observeOn.js:80:23)
    at AnonymousSubject.Observable.subscribe (webpack-internal:///./node_modules/rxjs/Observable.js:157:22)
    at WithLatestFromOperator.call (webpack-internal:///./node_modules/rxjs/_esm5/operators/withLatestFrom.js:73:23)
    at AnonymousSubject.Observable.subscribe (webpack-internal:///./node_modules/rxjs/Observable.js:157:22)

Followed the steps present here https://github.com/ngrx/platform/blob/master/docs/store/README.md

@mayurgaud open a new issue with a reproduction of the error.

still have this issue...

Was this page helpful?
0 / 5 - 0 ratings