Comments (37)
any update? I ran into this issue too, it is painful without dev tools around
from platform.
@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?
from platform.
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"?
from platform.
@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.
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.
from platform.
Running into the same issue, you ever find a solution?
from platform.
@llwt unfortunately not yet. I have reverted back to the 2.x branch because I don't have the time to debug alpha versions.
from platform.
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
from platform.
So that actually doesn't work as expected. The dev tools work but all actions end up being fired twice...
from platform.
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..
from platform.
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
from platform.
@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
from platform.
I also went back to 2.x; works well enough
from platform.
You can always move that ETA up by contributing back to the project yourself.
from platform.
@boneskull I'm trying :P see my earlier comments.
from platform.
:-) This seems to be fixed as of today's "nightly" build (store-devtools-builds#c242ff2).
Thanks team!
from platform.
@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)
from platform.
@axtho try pulling the latest store build too
from platform.
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)
from platform.
@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.
from platform.
I'm using lazy features modules
from platform.
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.
from platform.
@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.
from platform.
@axtho meanwhile u can log the actions: action$.subscribe(a => console.log(a))
from platform.
@axtho have you tried the method above of putting the devtools and store in the AppModule
from platform.
@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?
from platform.
@brandonroberts @axtho Also seeing this error when importing StoreDevtoolsModule only in the App module.
from platform.
Latest build works like a charm!
Thanks!
from platform.
@brandonroberts thanks for doing this despite the holiday ;) it works now.
from platform.
But it really slow down the app, normal ?
from platform.
yes, i also noticed that ... maybe that has to do with the subscription not being closed properly?
from platform.
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
})
from platform.
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
)
from platform.
Error still present, what's the main workaround ? Should I go down to some version?
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)```
from platform.
@siordache94 if you can provide a reproduction, open a new issue so we can take a look. This has been resolved for some time.
from platform.
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
from platform.
@mayurgaud open a new issue with a reproduction of the error.
from platform.
still have this issue...
from platform.
Related Issues (20)
- untracked for all methods? HOT 4
- @ngrx/signals: ability to save entity class instance on updateEntity() HOT 1
- Expose more models to the public API: SignalStoreFeatureResult and InputSignalStore<Input>
- Using a custom generic function for defining props in createActionGroup results in weird TypeScript errors HOT 4
- Chaining custom signal store features with input declared as functions fails HOT 2
- @ngrx/effects/src/effect_creator.d.ts:12:43 - error TS2313: Type parameter 'OT' has a circular constraint. HOT 17
- Schematics 'feature' gives error "Property 'entity' does not match the schema. 'false' should be a 'boolean'." HOT 8
- `patchState` TypeScript v5.4 compilation error HOT 3
- updater-explicit-return-type No longer needed with NoInfer HOT 2
- Cannot generate feature inside module with schematics HOT 2
- RFC: Allow constructor injection of SignalStore
- RFC: SignalStore with WritableSignals and ReadOnlySignalStore HOT 8
- Signal Store with Angular SSR initiate store in every injected component HOT 2
- Type 'Unsubscribable' must have a '[Symbol.iterator]()' method that returns an iterator. HOT 2
- Return type of selectQueryParam is incorrect HOT 2
- SignalStore Methods code snipped has probably a flaw HOT 4
- eslint plugin should use correct version of 'concatLatestFrom' in autofix for rule 'prefer-concat-latest-from' HOT 5
- Provide properly typed selectors example for CustomSerializer
- No usage notes for `tapResponse`, `concatLatestFrom` operators. HOT 1
- Ngrx dependency injection issue with esbuild/build-angular:application HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from platform.