ngrx / store-devtools Goto Github PK

View Code? Open in Web Editor NEW

326.0 30.0 38.0 114 KB

Developer Tools for @ngrx/store

License: MIT License

TypeScript 95.59% JavaScript 4.41%

store-devtools's Introduction

This repository is for version 3.x of of @ngrx/store-devtools.

Click here for the latest version (4.x)

@ngrx/store-devtools

Devtools for @ngrx/store.

Installation

npm install @ngrx/[email protected] --save

Instrumentation

Instrumentation with the Chrome / Firefox Extension (Preferred)

Download the Redux Devtools Extension
In your root Angular module import StoreDevtoolsModule.instrumentOnlyWithExtension():

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    // Note that you must instrument after importing StoreModule
    StoreDevtoolsModule.instrumentOnlyWithExtension({
      maxAge: 5
    })
  ]
})
export class AppModule { }

Instrumentation with a Custom Monitor

To instrument @ngrx/store and use the devtools with a custom monitor you will need to setup the instrumentation providers using instrumentStore():

import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    // Note that you must instrument after importing StoreModule
    StoreDevtoolsModule.instrumentStore({
      maxAge: 5,
      monitor: monitorReducer
    })
  ]
})
export class AppModule { }

See @ngrx/store-log-monitor for an example monitor built for Angular 2

Contributing

Please read contributing guidelines here.

store-devtools's People

Contributors

Stargazers

Watchers

store-devtools's Issues

Could the counter and the counter spec be moved into its own repo?

The counter reducer and its spec (which are in this repo) would be a lot more helpful if they were in one repo all by themselves. There are so many working parts to just get the counter test to run for a first-timer to ng2 (ng2, jasmine, karma, rxjs, ngrx, module loader, etc...) that it would be great to have this one small repo where a quick example had both the source and the test.

new Angular 4 >=rc4 breaks the package

See store#357

Basically, new Angular 4 >=rc4 breaks the package.

performance is slow when dealing with large data set

We have a large data set, about 11,000+ records, and we see major slow down in the application when the Redux devtool is enabled.

As soon as we disabled it, all is great and fast again.

// StoreDevtoolsModule.instrumentOnlyWithExtension(),

If this is a challenging fix, I would like to be able to pause / mute the extension and only activate it when I need it. This way we will not have to manually mark and unmark all the time in the source code:

StoreDevtoolsModule.instrumentOnlyWithExtension(),

already set the history to 5.
if any other recommendation on optimization, will be glad to test,

now it could very well be that the bug is really with the chrome extension itself and not the ngrx side of things....

so I did further testing and this is definitely an issue when dealing with a data set of 11,000+ items.
I also want to note that if you click the commit button, things will works just fine for a few more iterations.
So maybe the history of the commit is what is causing the slowness?
Is there a way to simply auto commit after every store update while in development mode?

I created a video of the issue:
https://dl.dropboxusercontent.com/u/93017334/ReduxDev.mp4

Regards,

Sean

Chrome extension

Thanks for this great tool!

Just a suggestion. Maybe in the future, create a dev tool as Chrome extension.
Like this ExtensionRedux DevTools.

Chrome extension chart is not refreshed properly when using instrumentOnlyWithExtension()

Redux devtools chrome extension: 2.9.0
ngrx/store-devtools: 3.2.2

When my state changes, I expect the chart/graph in the chrome extension to update and reflect the new state. When I call StoreDevtoolsModule.instrumentStore({ monitor: useLogMonitor() }), passing the logMonitor from the accompanying StoreLogMonitorModule, all state changes are updated live in the chrome extension graph.

However, if I call StoreDevtoolsModule.instrumentOnlyWithExtension(), the chrome extension graph is not refreshed when the state changes. If I select another tab in the chrome extension and return to the graph tab, then the graph shows the correct state.

Can we have the live-refresh functionality for the graph without having to use a custom monitor? Right now I have to instrument with the custom ngrx logMonitor and place the <ngrx-store-log-monitor> component in my app to force the chart to refresh.

How to deserialize state so we can use ImmutableJs with the chrome extension

I followed the installation method with chrome app.

But I'm using immutableJs and I can't timetravel, undo/redo within the chrome app.

With Redux, this is the basic setup to have the app working with ImmutableJs. See deserializeState(state) part :

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  deserializeState: (state) => ({
    todos: {
      ...state.todos,
      todoList: Immutable.fromJS(state.todos.todoList)
    }
  })
}));

Is it possible to use deserializeState from store-devtools ? If so, how to ? I've been looking at the doc but I couldn't find anything.

PS: This might be related to #33 but I tried to give more information here.

Map just shows as empty entity in devtools

Hello,
used the new Map in ngrx and try to debug it in the devtools for Chrome (58.0.3029.110) on macOS 10.12.5, but it shows as an empty entity. However test are not failing and when I print the Map it looks fine.

I ll add my State + initial state, maybe it helps understanding.

export interface State {
  myMap: Map<string, Item[]>;
}

const INITIAL_STATE: State = {
  myMap: new Map<string, Item[]>().set('default', []),
};

Skip/Dispatch not working after chrome extension upgrade to version 2.12.1

hi,

I have used this awesome devtools for chrome,
and it works well until the extension upgrading to 2.12.1.

I have tried to use the devtools with demos from redux-devtools, it works fine.
But with the example-app, the skip/dispatch didn't work anymore.

the redux-devtools extension for Firefox works well, too.

did someone have experienced the same problem?

StoreDevtoolsModule.instrumentStore not compatible with AOT

StoreDevtoolsModule.instrumentOnlyWithExtension() works with AOT.
StoreDevtoolsModule.instrumentStore not compatible with AOT
getting an error of:

ERROR in Error encountered resolving symbol values statically. Calling function 'StoreDevtoolsModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/msweb/studiotouch/src/app/app.module.ts, resolving symbol AppModule in C:/msweb/studiotouch/src/app/app.module.ts

And we rely on instrumentStore as we need to provide maxAge, otherwise our dev tools will not work (large data set)

can we please fix it so it works just like instrumentOnlyWithExtension

angular-cli: 1.0.0-beta.25.5
node: 6.5.0
os: win32 x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.2.1
@angular/compiler-cli: 2.4.3
@angular/language-service: 2.4.3

thanks as always,

Sean

Are the store-devtools delivered to production as well?

hi there,

silly question, but I couldn't find any information on the github page:

Is there any problem to deliver the store-devtools (activated) to the production app?
If it is dangerous to deliver the app with the store-devtools, is the exclusion of this library already implemented or do we have to take care of this by our own?
If dangerous and exclusion not implemented -> any guide to exclude it?

maybe it makes also sense to put these information somewhere in the info page

ps: yes i know, it is called *-devtools so these questions might be easy to answer.

thanks, cheers

emre

The devtools cannot be toggled to show/hide until an action was dispatched.

Ionic Framework

Hi...

Is possible use this with ionicframework?

i use StoreDevtoolsModule.instrumentOnlyWithExtension(), but the redux extension show nothing

ReduxDevTools problem on 3.0.0

After upgrading on @ngrx/[email protected], the Redux DevTools no longer inspect state.

I've tried with @ngrx/store-log-monitor:3.0.0 and its fine.

Customization does not work

Hi,

Well done on getting this out to the world, this will be an awesome help in developing Angular 2 apps. I was trying to follow the Readme but could not get the Customization part to work. The devtoolsConfig does not seem to exist in the @ngrx/devtools namespace.

Here is what I have in my package.json:

"@ngrx/devtools": "^1.3.1",
"@ngrx/store": "^1.3.3",

Kind regards

Jusef

feat(devtools): Provide configuration options for devtools

Add options for changing default dock position, keyboard shortcut commands.

Not showing state with chrome extension v2.12.1 (Lazy loading)

Hello,

I'm using ngrx/store and I have multiple lazy loaded modules. After the updating the chrome extension to v2.12.1 I'm not able to view the stores.

For anyone having problems with v2.12.1 you can download the prev version from here: v2.12.0

Prevent dispatching while undoing/replaying recorded actions

Let's say I have a form (ControlGroup) and I have subscribed to its valueChanges observable. Each time the form's value changes, I dispatch an action to update the state of my form in the store.

The problem arises for me when I want to debug with the ngrx/devtools. If I undo/replay any of the recorded form update actions, the form detects the change and fires another action that clutters up my action history.

Is there a known method to deal with this type of thing? Perhaps there could be a toggle setting on the devtools component to prevent dispatches while "time traveling"?

Changing the displayed action name

This is only relevant to using the browser extension.

Some of my actions have an extra property context that would very useful to have displayed in the action list.

Is there a way to intercept what is sent to the extension to customize what is displayed?

ngrx/devtools import with SystemJS not working.

Thanks for these great tools!
I use ngrx/[email protected] with systemJS and it works very well.
But I just tried to add ngrx/[email protected] exactly the same way and it fails with this error:
GET http://localhost:3000/node_modules/@ngrx/store/dist/dist/store-backend.js 404 (Not Found)

Here is my systemJS config:

    System.config({
        packages: {
            src: {
                format: 'register',
                defaultExtension: 'js'
            },
            '@ngrx/store': {
                main: 'index.js',
                format: 'cjs'           
            },
            '@ngrx/devtools': {
                main: 'index.js',
                format: 'cjs'           
            } 
        },
        map: {
            '@ngrx/store': 'node_modules/@ngrx/store/dist',
            '@ngrx/devtools': 'node_modules/@ngrx/devtools/dist'
        }
    });

That's weid because store-backend.js is loaded correctly from http://localhost:3000/node_modules/@ngrx/store/dist/store-backend.js when I don't use/import @ngrx/devtools..

Any ideas how to solve it?

TypeError: Cannot read property 'type' of undefined

Not sure why this is happening. I don't have any effects that do not dispatch actions. When performAction gets called:

 performAction: function (action) {
        if (typeof action.type === 'undefined') {
            throw new Error('Actions may not have an undefined "type" property. ' +
                'Have you misspelled a constant?');
        }
        return { type: ActionTypes.PERFORM_ACTION, action: action, timestamp: Date.now() };
    },

I'm not getting the thrown error because action is undefined.


ERROR TypeError: Cannot read property 'type' of undefined
    at Object.performAction (actions.js:17)
    at MapSubscriber.liftAction [as project] (utils.js:20)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:77)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MergeAllSubscriber.webpackJsonpac__name_../node_modules/rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:19)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SkipSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/skip.js.SkipSubscriber._next (skip.js:46)
    at SkipSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at Dispatcher.webpackJsonpac__name_../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
    at Dispatcher.webpackJsonpac__name_../node_modules/rxjs/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:44)
    at Store.webpackJsonpac__name_../node_modules/@ngrx/store/src/store.js.Store.next (store.js:35)
    at SafeSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:236)
    at SafeSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MergeAllSubscriber.webpackJsonpac__name_../node_modules/rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (OuterSubscriber.js:19)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber.notifyNext (switchMap.js:124)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83)
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at FinallySubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at FinallySubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at CatchSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at CatchSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber.notifyNext (switchMap.js:124)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23)
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at XMLHttpRequest.onLoad (http.es5.js:1205)
    at ZoneDelegate.ac_polyfills../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4116)
    at ZoneDelegate.ac_polyfills../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.ac_polyfills../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)
    at ____________________Elapsed_4483_ms__At__Tue_May_02_2017_10_01_55_GMT_0500__CDT_ ()
    at getStacktraceWithUncaughtError (long-stack-trace-zone.js:39) [angular]
    at new LongStackTrace (long-stack-trace-zone.js:33) [angular]
    at Object.onScheduleTask (long-stack-trace-zone.js:109) [angular]
    at Object.onScheduleTask (zone.js:274) [angular]
    at zoneAwareAddListener (zone.js:1453) [angular]
    at XMLHttpRequest.addEventListener (eval at createNamedFn (zone.js:1587), <anonymous>:3:43) [angular]
    at Observable._subscribe (http.es5.js:1252) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._trySubscribe (Observable.js:57) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:45) [angular]
    at Object.subscribeToResult (subscribeToResult.js:22) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:101) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._next (switchMap.js:94) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at XMLHttpRequest.onLoad (http.es5.js:1205) [angular]
    at Object.onInvokeTask (core.es5.js:4116) [angular]
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460) [<root>]
    at ____________________Elapsed_98_ms__At__Tue_May_02_2017_10_01_55_GMT_0500__CDT_ ()
    at getStacktraceWithUncaughtError (long-stack-trace-zone.js:39) [angular]
    at new LongStackTrace (long-stack-trace-zone.js:33) [angular]
    at Object.onScheduleTask (long-stack-trace-zone.js:109) [angular]
    at Object.onScheduleTask (zone.js:274) [angular]
    at zoneAwareAddListener (zone.js:1453) [angular]
    at XMLHttpRequest.addEventListener (eval at createNamedFn (zone.js:1587), <anonymous>:3:43) [angular]
    at Observable._subscribe (http.es5.js:1252) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._trySubscribe (Observable.js:57) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:45) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at SwitchMapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapOperator.call (switchMap.js:67) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at CatchOperator.webpackJsonpac__name_../node_modules/rxjs/operator/catch.js.CatchOperator.call (catch.js:79) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at FinallyOperator.webpackJsonpac__name_../node_modules/rxjs/operator/finally.js.FinallyOperator.call (finally.js:26) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at Object.subscribeToResult (subscribeToResult.js:22) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:101) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._next (switchMap.js:94) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber.notifyNext (switchMap.js:124) [angular]
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:23) [angular]
    at InnerSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at FirstSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/first.js.FirstSubscriber._emitFinal (first.js:135) [angular]
    at FirstSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/first.js.FirstSubscriber._emit (first.js:118) [angular]
    at FirstSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/first.js.FirstSubscriber._next (first.js:97) [angular]
    at FirstSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at DistinctUntilChangedSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/distinctUntilChanged.js.DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:103) [angular]
    at DistinctUntilChangedSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapSubscriber._next (map.js:83) [angular]
    at MapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at ReplaySubject.webpackJsonpac__name_../node_modules/rxjs/ReplaySubject.js.ReplaySubject._subscribe (ReplaySubject.js:55) [angular]
    at ReplaySubject.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._trySubscribe (Observable.js:57) [angular]
    at ReplaySubject.webpackJsonpac__name_../node_modules/rxjs/Subject.js.Subject._trySubscribe (Subject.js:97) [angular]
    at ReplaySubject.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:45) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._subscribe (Observable.js:116) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._trySubscribe (Observable.js:57) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:45) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Observable.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._subscribe (Observable.js:116) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable._trySubscribe (Observable.js:57) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:45) [angular]
    at MapOperator.webpackJsonpac__name_../node_modules/rxjs/operator/map.js.MapOperator.call (map.js:54) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at DistinctUntilChangedOperator.webpackJsonpac__name_../node_modules/rxjs/operator/distinctUntilChanged.js.DistinctUntilChangedOperator.call (distinctUntilChanged.js:60) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at FirstOperator.webpackJsonpac__name_../node_modules/rxjs/operator/first.js.FirstOperator.call (first.js:70) [angular]
    at Store.webpackJsonpac__name_../node_modules/rxjs/Observable.js.Observable.subscribe (Observable.js:42) [angular]
    at Object.subscribeToResult (subscribeToResult.js:22) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:101) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/switchMap.js.SwitchMapSubscriber._next (switchMap.js:94) [angular]
    at SwitchMapSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at FilterSubscriber.webpackJsonpac__name_../node_modules/rxjs/operator/filter.js.FilterSubscriber._next (filter.js:88) [angular]
    at FilterSubscriber.webpackJsonpac__name_../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) [angular]
    at Dispatcher.webpackJsonpac__name_../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55) [angular]
    at Dispatcher.webpackJsonpac__name_../node_modules/rxjs/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:44) [angular]
    at Store.webpackJsonpac__name_../node_modules/@ngrx/store/src/store.js.Store.dispatch (store.js:32) [angular]
    at EmployeeListComponent.webpackJsonpac__name_../src/app/employees/components/employee-list/employee-list.component.ts.EmployeeListComponent.search (employee-list.component.ts:52) [angular]
    at EmployeeListComponent.webpackJsonpac__name_../src/app/employees/components/employee-list/employee-list.component.ts.EmployeeListComponent.ngOnInit (employee-list.component.ts:47) [angular]
    at checkAndUpdateDirectiveInline (core.es5.js:10705) [angular]
    at checkAndUpdateNodeInline (core.es5.js:12084) [angular]
    at checkAndUpdateNode (core.es5.js:12052) [angular]
    at debugCheckAndUpdateNode (core.es5.js:12681) [angular]
    at debugCheckDirectivesFn (core.es5.js:12622) [angular]
    at Object.eval [as updateDirectives] (EmployeeListComponent_Host.html:1) [angular]
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12607) [angular]
    at checkAndUpdateView (core.es5.js:12019) [angular]
    at callWithDebugContext (core.es5.js:13007) [angular]
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12547) [angular]
    at ViewRef_.webpackJsonpac__name_../node_modules/@angular/core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10116) [angular]
    at :3000/sbMain.bundle.js:20487:102 [angular]
    at m.$digest (angular.js:17515) [angular]
    at m.$apply (angular.js:17790) [angular]
    at cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js:20:488 [angular]
    at Object.invoke (angular.js:4718) [angular]
    at c (angular.js:1759) [angular]
    at Object.Bc [as bootstrap] (angular.js:1779) [angular]
    at bootstrap (static.es5.js:51) [angular]
    at :3000/sbMain.bundle.js:21407:39 [angular]
    at Object.onInvoke (core.es5.js:4125) [angular]
    at NgZone.webpackJsonpac__name_../node_modules/@angular/core/@angular/core.es5.js.NgZone.run (core.es5.js:3994) [<root>]
    at UpgradeModule.webpackJsonpac__name_../node_modules/@angular/upgrade/@angular/upgrade/static.es5.js.UpgradeModule.bootstrap (static.es5.js:1170) [<root>]
    at :3000/sbMain.bundle.js:65940:17 [<root>]
    at :3000/polyfills.bundle.js:16426:57 [<root>]
    at drainMicroTaskQueue (zone.js:591) [<root>]
    at HTMLDocument.ZoneTask.invoke (zone.js:464) [<root>]

Not working at all with version 1.4.0 of ngRx/store

I have updated ngRx to 1.4 today and could not use the devtools anymore. I am getting various errors. Hope this will be fixed soon we can continue working with this awesome package.

Universal apps can't render with devtools

Filed an issue for tracking even though we discussed in gitter.

Currently the below section prevents universal rendering of the application due to the call to window.

const REDUX_DEVTOOLS_EXTENSION_PROVIDER = {
  provide: REDUX_DEVTOOLS_EXTENSION,
  useFactory() {
    if (window && (window as any).devToolsExtension) {
      return (window as any).devToolsExtension;
    }
    return null;
  }
};

Can be rectified by modifying the check for the window object.

const REDUX_DEVTOOLS_EXTENSION_PROVIDER = {
  provide: REDUX_DEVTOOLS_EXTENSION,
  useFactory() {
    if (typeof window !== 'undefined' && (window as any).devToolsExtension) {
      return (window as any).devToolsExtension;
    }
    return null;
  }
};

Will try to send a PR tonight.

programatically open/close store

hey,

thx for your awesome work on the devtools.

i am using ngrx/devtools with ionic 2 and cordova.

so i wanted to ask how i can programatically

toggle visibility
change the position
change the size

thx in advance

Possible to send options/arguments to Redux Devtools extension?

Is there any way to pass options/arguments to the redux-devtools-extension? It seems that maxAge gets carried along, but it would be nice to be able to specify the other options as well.

Early dispatch call get lost when using store-devtools

I am using these versions or ngrx/store and related libs (in an Angular 2 application):

"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.1",
"@ngrx/store-devtools": "^3.1.0",
"@ngrx/store-log-monitor": "^3.0.2",

When my app container loads, I launch a request for data to the API and dispatch an action to set the state of my application.
Everything goes well when I am not using the store-devtools, but when I use store-devtools I noticed the initial dispatches somehow get "lost", they don't reach reducers, and don't reach the store.

I have these 2 screenshots. I added some logging in 1 of my reducers (popular content reducer the type of the action). I also added a console log before I do request the data from the API, the line says dispatch load state for popular content. Immediately after that log, I dispatch an action.
The first screenshots is without devtools, the action for the loading state comes through, the 2nd screenshot is with devtools, then the action does not come through.

without devtools

with devtools

So with the store-devtools enabled, the action dispatched does not reach the reducer.

I started doing some debugging, I noticed that in ngrx/store, the State object is a BehaviourSubject and is automatically subscribed to: https://github.com/ngrx/store/blob/master/src/state.ts#L20

For ngrx/store-devtools the State object is a regular observer without any subscriptions:

store-devtools/src/devtools.ts

Line 64 in 58f3ea6

const state = map.call(liftedState, unliftState);

So, this can help me explain the issue, when dispatching the load action from my application container, routing has not been done, and there is no component subscribing to the state yet, so when dispatching an action, nothing happens as observables don't do anything until they are subscribed on. Which is not the case for store-devtools but which is the case for store.
(In my opinion it's not bad practice to dispatch an action to update the application state before there are components listening for it)

I tried adding a subscribe on the state$ object in my devtools and that does fix my issue.

Is there a specific reason devtools does not use BehaviourSubject for the state object?
I have the feeling adding an "empty" subscribe on the state$ is not the prettiest solution.

Am I the first person running in to this problems or am I approaching this incorrectly?

Events in constructor or ngOnInit not dispatched in RC5

@brechtbilliet pointed out that there is a problem when dispatching events in the constructor or in the ngOnInit lifecycle hooks.

The original post can be found here: https://github.com/ngrx/example-app/issues/30#issuecomment-240427149

There is a problem when dispatching initial events (in constructor or ngOnInit) when using the instrumentStore function in the providers property. They will just be ignored. Check this plunk http://plnkr.co/edit/00IJ8KBRXLDPPykFwcyD

in app/app.component.ts these tree lines should add three users:

constructor(private store: Store){
this.store.dispatch({type: "ADD_USER", payload: {user:"user"}});
this.store.dispatch({type: "ADD_USER", payload: {user:"user"}});
this.store.dispatch({type: "ADD_USER", payload: {user:"user"}});
}
The users are being added correctly.
In app/app.module.ts, uncomment the instrumentStore function and you will the events will not be dispatched anymore. Also uncomment StoreLogMonitorComponent to test

I noticed that dispatching the actions in ngAfterViewInit did work, everything before that lifecycle hook doesn't.

Serializing ES6 Sets

Please provide me with instructions on how to pass the {serialize: true} parameter to allow ES6 Sets to be seen in store-devtools

zalmoxisus/redux-devtools-extension#378

The following won't even compile due to mistyping:

StoreDevtoolsModule.instrumentOnlyWithExtension({
  serialize: true,
}),

enable sourcemaps?

Hi there,

I'd like to discuss if we should enable sourcemaps in the tsconfig.json. Reason: When I had an error in one of my reducers. The error was obscured by store-devtools, which (loggs out the error)[https://github.com/ngrx/store-devtools/blob/master/src/reducer.ts#L37], but it seems when sourcemaps are not enabled chrome has problems detecting the sourcemaps of files further up the stack. I found this issue in Chrome.

Anyhow, it could be that my webpack configuration is the problem, but when I checked out the projected in build it w/ sourcemaps enabled it got better errors. What's your take on this? Any reasons not to ship sourcemaps?

Thanks, Robin

Edit: Setting the webpack config to devtool: 'source-map' solves the problem, so feel free to close the issue if you consider it irrelevant (I leave it open since I'd like to know your thoughts on why sourcemaps are disabled)

Can't export state using redux devtools chrome extension

Hi there,

I found that when I click on export in the chrome extension, nothing happens. First I thought it's an issue with Chrome or the extension, but it's working fine for non ngrx based redux apps.

To replicate the issue

Install the chrome extension
Visit the ngrx example app (http://ngrx.github.io/example-app/#/)
Open the extension
Click export
Observe that nothing happens

Expected behaviour

I'd expect clicking the export button to download the exported state. Just like it does doing so on http://zalmoxisus.github.io/examples/counter/

Chrome version: 55.0.2883.75 (64-bit) (Mac)
Redux DevTools extension version: 2.11.0.4
Node version: v6.3.0
nom version: 3.10.3

createChangesObservable() immediately unsubscribes instead of returning a wrapper Fn

I'm using store-devtools with remotedev for on-device debugging as described in https://gist.github.com/rob3c/c2c4dcc1116f94901ace179722c5f6d4 and I'm trying to get state updates from the inspector working. Time travel and state imports are both addressed in separate issues, but I don't see this particular detail addressed yet in the current master:

It looks like the createChangesObservable() function in extension.ts mistakenly calls connection.unsubscribe() immediately when wrapping the extension in an Observable, rather than returning a function that calls it as a dispose/unsubscribe function for the subscriber to call later. This immediately cancels the subscription, so server updates are never received.

Here's the current code:

private createChangesObservable(): Observable<any> {
  if (!this.devtoolsExtension) {
    return empty();
  }
  return new Observable(subscriber => {
    const connection = this.devtoolsExtension.connect({ instanceId: this.instanceId });
    connection.subscribe(change => subscriber.next(change));
    return connection.unsubscribe();
  });
}

That last line should probably be something like this:

    return () => connection.unsubscribe();

It was only working coincidentally due to a bug in remotedev's unsubscribe code, but that's been fixed in 2.0.3 (See zalmoxisus/remotedev#4).

time travel doesn't work with redux devtools

hi,

i'm trying to use the official redux devtools extensions for chrome but i can't use the slider to time travel between states and in the inspector tab i can't revert/skip/dispatch actions.

did someone have experienced the same problem?

Are your new modules shouldn't have schemas : [CUSTOM_ELEMENTS_SCHEMA] ?

Hello,

When i am using your new modules (Angular2@rc5), everything works fine in dev mode. But when I build my dist, I got an ugly error :

Can't bind to 'visible' since it isn't a known property of 'ngrx-dock'.

If 'ngrx-dock' is an Angular component and it has 'visible' input, then verify that it is part of this module.
If 'ngrx-dock' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
("rtcut]="positionCommand" (command)="changePosition$.next($event)">

If i put [CUSTOM_ELEMENTS_SCHEMA], in all of your modules (store-devtools, store-log-monitor, dock-monitor, etc...), everything works fine.

The point is :
Maybe I shouldn't have these modules in my appplication module, since it has to be in production, and remove this code when I build my dist ?

StoreDevtoolsModule.instrumentStore({
monitor: useLogMonitor({
visible: true,
position: 'right'
})
}),
StoreLogMonitorModule

add to docs instrumentOnlyWithExtension with support for AOT

Add to docs instrumentOnlyWithExtension with support for AOT

import { STORE_DEVTOOLS_CONFIG } from '@ngrx/store-devtools/src/config';

export function noMonitor() {
  return null;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    StoreModule.provideStore(rootReducer),
    StoreDevtoolsModule.instrumentOnlyWithExtension()
  ],
  providers: [
    {
      provide: STORE_DEVTOOLS_CONFIG, useValue: {
        maxAge: 20,
        monitor: noMonitor
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Clear console

Could we have a clear console functionality please, so useful for debugging. Unless it's somehow hidden.

add support for remote devtools via remotedev

Hi, currently store-devtools will leverage the Redux DevTools Chrome extension if it finds an instance on the window object, which is awesome! That does assume that it's running in the same browser with the extension, though.

It'd be nice to also include support for remote debugging so that Cordova/Ionic/etc hybrid app devs can leverage store-devtools during on-device debugging instead of only in the browser where native plugins and such don't work.

For now, I've hacked together a proxy that wraps the remotedev project in this gist, which might be useful to see how minimal the addition would need to be to leverage the existing code.

It seems to work well with the Inspector, Log Monitor and Graph, but doesn't work with time-travel and state import due to the open issues with the regular extension, of course. (I don't really know the edge cases my simple wrapper might be missing, though, so any feedback would be welcome.)

Thanks in advance!

documentation unclear

The readme states

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer),
    // Note that you must instrument after importing StoreModule
    StoreDevtoolsModule.instrumentStore({
      maxAge: 5,
      monitor: monitorReducer
    })
  ]
})

however I have no idea where you go the monitorReducer from.

Also I'm using (maybe due to old code) 'providers: []' to get init the store.

npm no release build published

Why is there no release build files included in the published npm package for @ngrx/store-devtools?

Typically a package published to npm should include these files (alongside the original sourcecode) so the package can be used without additional compilation configuration.

CD error when inside conditional template

Either of these templates causes the following (when doDevTools === true)

  <ngrx-devtools *ngIf="doDevTools"></ngrx-devtools>

  <div *ngIf="doDevTools"><ngrx-devtools ></ngrx-devtools></div>

browser_adapter.js:81 ORIGINAL EXCEPTION: Expression '(items$ | async) in LogMonitor@20:8' has changed after it was checked. Previous value: '[object Object]'. Current value: '[object Object]'

orig. stack trace

BrowserDomAdapter.logError  @   browser_adapter.js:81
ExceptionHandler.call   @   exception_handler.js:65
(anonymous function)    @   application_ref.js:166
NgZone._notifyOnError   @   ng_zone.js:252
onError @   ng_zone.js:156
Zone.run    @   core.js:82
(anonymous function)    @   ng_zone.js:175
zoneBoundFn @   core.js:58
Zone.run    @   core.js:79
(anonymous function)    @   ng_zone.js:175
zoneBoundFn @   core.js:58
Promise.reject (async)      
Zone.run    @   core.js:79
zoneBoundFn @   core.js:58
Promise.reject (async)      
Zone.run    @   core.js:79
zoneBoundFn @   core.js:58
Promise.reject (async)      
Zone.run    @   core.js:79
zoneBoundFn @   core.js:58
Promise.reject (async)      
Zone.run    @   core.js:79
zoneBoundFn @   core.js:58

"Log State"/"Log Payload" in ionic2/cordova logs out [object Object]

Hey,

how can i JSON.stringify these logs?

Time travel doesn't work again :(

It looks when I press Jump button in DevTools to set some specific state it doesn't trigger any event on client side. I subscribed to all the elems on whole state path and it didn't fire any event for subscriptions. When I call normal dispatch operations on store it calls my subscriptions/callbacks for elements on whole path (for subscription of element on level 1/root elem and for level 2 and 3 also).

Devtools are in version 2.15.1, ngrx/store-devtools are in version 3.2.4, ngrx/store is in version 2.2.2, angular is in version 2.4.5

ngrx/effects are not triggered

Hi,

I'm developing an Ionic app where the page navigation is handled by dedicated effects.
Unfortunately, the Redux Chrome slider is not working properly because for a given action the corresponding effect are not triggered.

Can I workaround it via an "Instrumentation with a Custom Monitor"?

Thanks

How do you add multiple reducers to the same instrumentStore?

Say I have ten reducers.. How do I add all those reducers to the same instrumentStore?

instrumentStore({
    monitor: [oneReducer, twoReducer, ...etc],
    maxAge: 5
  })

Native code crash on iOS devices

Hi there,

On connecting the reducer with store-devtools to the store, I get the following error on all iOS devices:

forEach@[native code]
deepFreeze

forEach@[native code]
deepFreeze

forEach@[native code]
deepFreeze

forEach@[native code]
deepFreeze

forEach@[native code]
deepFreeze


rootReducer
computeNextEntry
recomputeStates


_tryNext
_next
next
_next
next
observe
dispatch
_execute
execute
flush
schedule
schedule
scheduleMessage
_next
next
notifyNext
_next
next
_next
next
notifyNext
_next
next
_next
next
next
next
next
__tryOrUnsub
next
_next
next
notifyNext
_next
next
notifyNext
_next
next
notifyNext
_next
next
_next
next
notifyNext
_next
next
subscribeToResult
_innerSub
_tryNext
_next
next
_next
next
onLoad
invokeTask
onInvokeTask
invokeTask
runTask
invokecomputeNextEntry @ (program):28
recomputeStates @ (program):55
(anonymous function) @ (program):237
(anonymous function) @ (program):77
_tryNext @ (program):98
_next @ (program):91
next @ (program):89
_next @ (program):113
next @ (program):89
observe @ (program):32
dispatch @ (program):50
_execute @ (program):111
execute @ (program):33
flush @ (program):36
schedule @ (program):27
schedule @ (program):43
scheduleMessage @ (program):53
_next @ (program):56
next @ (program):89
.....

Don't even know where to start with this one!

Store subscribe throws "TypeError: toISOString is not a function" when devtools enabled

Trying to use the devtools I get this Chrome console error:

onError: TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (http://localhost:3000/polyfills.dll.js:505:15)
    at derez (<anonymous>:2:5166)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5605)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at derez (<anonymous>:2:5787)
    at Object.decycle (<anonymous>:2:5824)
    at Object.e.stringify (<anonymous>:1:9180)
    at tryCatchStringify (<anonymous>:1:18835)
    at stringify (<anonymous>:1:18935)
    at toContentScript (<anonymous>:1:20155)
    at Function.sendMessage [as send] (<anonymous>:1:20641)
    at DevtoolsExtension.webpackJsonpac__name_.57.DevtoolsExtension.notify (http://localhost:3000/vendor.bundle.js:1462:32)
    at ScanSubscriber.accumulator (http://localhost:3000/vendor.bundle.js:1351:31)
    at ScanSubscriber._tryNext (http://localhost:3000/vendor.dll.js:94063:27)
    at ScanSubscriber._next (http://localhost:3000/vendor.dll.js:94056:25)
    at ScanSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at WithLatestFromSubscriber._next (http://localhost:3000/vendor.dll.js:96801:34)
    at WithLatestFromSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at Notification.observe (http://localhost:3000/vendor.dll.js:24076:50)
    at QueueAction.ObserveOnSubscriber.dispatch [as work] (http://localhost:3000/vendor.dll.js:47801:22)
    at QueueAction.AsyncAction._execute (http://localhost:3000/vendor.dll.js:24288:18)
    at QueueAction.execute (http://localhost:3000/vendor.dll.js:97134:18)
    at QueueScheduler.AsyncScheduler.flush (http://localhost:3000/vendor.dll.js:24361:32)
    at QueueAction.schedule (http://localhost:3000/vendor.dll.js:97128:24)
    at QueueScheduler.Scheduler.schedule (http://localhost:3000/vendor.dll.js:85633:53)
    at ObserveOnSubscriber.scheduleMessage (http://localhost:3000/vendor.dll.js:47808:56)
    at ObserveOnSubscriber._next (http://localhost:3000/vendor.dll.js:47811:14)
    at ObserveOnSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at MergeAllSubscriber.OuterSubscriber.notifyNext (http://localhost:3000/vendor.dll.js:642:26)
    at InnerSubscriber._next (http://localhost:3000/vendor.dll.js:85571:21)
    at InnerSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at MapSubscriber._next (http://localhost:3000/vendor.dll.js:12112:26)
    at MapSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at MergeAllSubscriber.OuterSubscriber.notifyNext (http://localhost:3000/vendor.dll.js:642:26)
    at InnerSubscriber._next (http://localhost:3000/vendor.dll.js:85571:21)
    at InnerSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at SkipSubscriber._next (http://localhost:3000/vendor.dll.js:94426:30)
    at SkipSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at Dispatcher.Subject.next (http://localhost:3000/vendor.dll.js:3420:25)
    at Dispatcher.BehaviorSubject.next (http://localhost:3000/vendor.dll.js:24033:31)
    at Store.webpackJsonpac__name_.61.Store.dispatch (http://localhost:3000/vendor.bundle.js:1682:26)
    at SafeSubscriber._next (http://localhost:3000/main.bundle.js:679:25)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/vendor.dll.js:591:16)
    at SafeSubscriber.next (http://localhost:3000/vendor.dll.js:540:22)
    at Subscriber._next (http://localhost:3000/vendor.dll.js:493:26)
    at Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at MapSubscriber._next (http://localhost:3000/vendor.dll.js:12112:26)
    at MapSubscriber.Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
    at XMLHttpRequest.onLoad (http://localhost:3000/vendor.dll.js:61898:38)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.dll.js:4304:31)
    at Object.onInvokeTask (http://localhost:3000/vendor.dll.js:30317:37)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.dll.js:4303:36)
    at Zone.runTask (http://localhost:3000/polyfills.dll.js:4103:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/polyfills.dll.js:4357:38)

Disabling the devtools from the app module makes this error disappear and the app behaves well.
This happens only after the store holds some data.

package.json:

"dependencies": {
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.2",
    "@ngrx/store-devtools": "^3.2.4",
}

app.module:

imports: [
    BrowserModule,
    HttpModule,
    StoreModule.provideStore(rootReducer),
    StoreDevtoolsModule.instrumentOnlyWithExtension({
      maxAge: 5
    }),
    RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
  ],

Suggestions?

Store-Devtools could be better written for speed

Although #45 was closed by the author after finding a band-aid solution (maxAge: 2), according to this zalmoxisus/redux-devtools-extension#314, there can be changes made to this package to further optimize the tool integration.

@zalmoxisus made a few suggestions, I'm not sure whether or not they are already implemented or not, but I'm just wanting to reference that issue so we can have some more visibility.

Does not work with custom actions?

Chrome extension version: 2.12

{
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/flex-layout": "^2.0.0-beta.1",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/platform-server": "~2.4.0",
    "@angular/router": "~3.4.0",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.0",
    "@ngrx/router-store": "^1.2.5",
    "@ngrx/store": "^2.2.1",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "moment": "^2.17.1",
    "rxjs": "5.0.1",
    "zone.js": "~0.7.4"
  }
}

Hey guys, I try to use the cool dev-tools, but I'm limited to the initial state somehow :-(

it is imported as such:

[...
    StoreModule.provideStore(reducer),
    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
...]

But only the ngrx/store/init action is catched.

It is to say, that I use custom actions since I don't like the concept of the strings.

my actions are as such:

import { Action } from '@ngrx/store';

export abstract class RxAction<T> implements Action {
    private _type: string;

    public get type(): string {
        return this._type || this.constructor.name;
    }

    public set type(value: string) {
        this._type = value;
    }

    constructor(public payload: T) { }
}

export abstract class RxErrorAction extends RxAction<Error> {
    constructor(error: Error) {
        super(error);
    }
}

export abstract class RxEmptyAction extends RxAction<undefined> {
    constructor() {
        super(undefined);
    }
}


export class FoobarAction extends RxAction<string> { }

The problem is, that all those dispatched actions are not catched by the dev tools.

this.store.dispatch(new FoobarAction('hello world'))

Is there anything I can do?
Cheers
Chris

1.3.3 errors - RxJs imports causing errors (can't be found in dist)

Using the devtools as stated, v1.3.3 with 1.3.2 @ngrx/store. It seems to be pointing to node_modules within it's own dist folder?

I believe it's coming from the store/devtools file here:
https://github.com/ngrx/devtools/blob/master/src/store/devtools.ts#L4-L8

ERROR in ./~/@ngrx/store/dist/store-backend.js
[1] Module not found: Error: Cannot resolve module 'rxjs/add/operator/let' in /Users/mp/GitHub/ngrx-rest-app/node_modules/@ngrx/store/dist
[1]  @ ./~/@ngrx/store/dist/store-backend.js 2:0-32
[1] 
[1] ERROR in ./~/@ngrx/devtools/dist/store/devtools.js
[1] Module not found: Error: Cannot resolve module 'rxjs/add/operator/let' in /Users/mp/GitHub/ngrx-rest-app/node_modules/@ngrx/devtools/dist/store
[1]  @ ./~/@ngrx/devtools/dist/store/devtools.js 3:0-32
[1] 
[1] ERROR in ./~/@ngrx/devtools/dist/monitors/dock-monitor/dock-monitor.js
[1] Module not found: Error: Cannot resolve module 'rxjs/add/observable/merge' in /Users/mp/GitHub/ngrx-rest-app/node_modules/@ngrx/devtools/dist/monitors/dock-monitor
[1]  @ ./~/@ngrx/devtools/dist/monitors/dock-monitor/dock-monitor.js 11:0-36

Detailed error from Chrome console:

client?e36c:47./~/@ngrx/store/dist/store-backend.js
Module not found: Error: Cannot resolve module 'rxjs/add/operator/let' in /Users/mp/GitHub/ngrx-rest-app/node_modules/@ngrx/store/dist
resolve module rxjs/add/operator/let in /Users/mp/GitHub/ngrx-rest-app/node_modules/@ngrx/store/dist
  looking for modules in /Users/mp/GitHub/ngrx-rest-app/node_modules
    resolve 'file' or 'directory' add/operator/let in /Users/mp/GitHub/ngrx-rest-app/node_modules/rxjs

Dependencies out of date

Looks we should look into updating numerous dependencies (see if it breaks any core logic).

Angular2 is @ beta 16.
RxJs @ beta 6.
es6shim, lodash, typings, and zone all have many updates as well.

https://david-dm.org/ngrx/devtools#info=devDependencies&view=table

https://david-dm.org/ngrx/devtools#info=peerDependencies&view=table

Error: Actions may not have an undefined "type" property. When using @ngrx/effects.

Hi, I am getting the following error when I dispatch an action that triggers an effect via @ngrx/effects

Actions may not have an undefined "type" property. Have you misspelled a constant?

The issue can be reproduced by cloning this repo. It happens only when the Chrome extension is installed.

Browser: Google Chrome v57.0.2987.133 (64-bit)
OS: Linux Mint 17.2 Rafaela (64-bit)
NPM: v4.1.2
NodeJs: v7.4.0

Can't import state with chrome dev tools

Hi,

I'm using this project with chrome dev tools and I'm loving it so thanks for your hard work.

However, I'm missing a feature where you can replace a current state with a saved one. It works fine with a pure react app like this one: http://zalmoxisus.github.io/examples/todomvc/
https://www.youtube.com/watch?v=JdybTliFl4I

But if I use chrome dev tools with the ngrx example app (or any other ngrx app) I'm not able to import the state: https://www.youtube.com/watch?v=5wD_GyEUHJc

Is this a bug or do store-devtools not suport this feature (replacing the store)?

I'm currently using the following versions of ngrx and angular:

@angular/common: 2.0.1
@angular/compiler: 2.0.1
@angular/core: 2.0.1
@angular/http: 2.0.1
@angular/platform-browser: 2.0.1
@angular/platform-browser-dynamic: 2.0.1
@ngrx/core: 1.2.0
@ngrx/effects: 2.0.0
@ngrx/store: 2.2.1
@ngrx/store-devtools: 3.1.0

And are bootstrapping store-devtools with:

@NgModule({
    declarations: ...,
    imports: [
        StoreModule.provideStore(reducers, initState()),
        EffectsModule.run(SomeEffects1),
        EffectsModule.run(SomeEffects2),
        StoreDevtoolsModule.instrumentOnlyWithExtension()
    ],
    bootstrap: ...,
    providers: ...
})

Thanks!

ngrx / store-devtools Goto Github PK

store-devtools's Introduction

This repository is for version 3.x of of @ngrx/store-devtools.

@ngrx/store-devtools

Installation

Instrumentation

Instrumentation with the Chrome / Firefox Extension (Preferred)

Instrumentation with a Custom Monitor

Contributing

store-devtools's People

Contributors

Stargazers

Watchers

Forkers

store-devtools's Issues

To replicate the issue

Expected behaviour

Recommend Projects

Recommend Topics

Recommend Org