Platform: Dev-tools: Import feature flag is not enough to enable importing

[smzelek]

Minimal reproduction of the bug/regression with instructions:

The devtools config for NGRX does not work as expected with the features flags. Specifically, the import feature seems to be disabled by some other state being set by the logOnly flag even if import is set as true in the config. This is a bug because the "Import" button still shows up in the NgRX chrome plugin, but always fails with the following error message:

core.js:15724 ERROR TypeError: Cannot read property 'length' of undefined
    at recomputeStates (store-devtools.js:522)
    at store-devtools.js:825
    at ScanSubscriber.StoreDevtools.liftedAction$.pipe.Object.state [as accumulator] (store-devtools.js:882)
    at ScanSubscriber.push../node_modules/rxjs/_esm5/internal/operators/scan.js.ScanSubscriber._tryNext (scan.js:61)
    at ScanSubscriber.push../node_modules/rxjs/_esm5/internal/operators/scan.js.ScanSubscriber._next (scan.js:54)
    at ScanSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at WithLatestFromSubscriber.push../node_modules/rxjs/_esm5/internal/operators/withLatestFrom.js.WithLatestFromSubscriber._next (withLatestFrom.js:66)
    at WithLatestFromSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at Notification.push../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (Notification.js:21)
    at QueueAction.push../node_modules/rxjs/_esm5/internal/operators/observeOn.js.ObserveOnSubscriber.dispatch (observeOn.js:40)

while debugging, I can see that all of the arguments to the recomputeStates() function are undefined. To reproduce, simply use an app with the following instrumentation for the StoreDevtoolsModule, export some state, and try to import it. Check the console for the error.

// environment.production = true
const ngRxStoreDevToolConfig: StoreDevtoolsOptions = { logOnly: environment.production, features: { export: true, import: true } };

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
      // ...
        StoreModule.forRoot(reducers, { metaReducers }),
        StoreDevtoolsModule.instrument(ngRxStoreDevToolConfig),
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Expected behavior:

The import feature flag should correctly determine the usability of the import feature; or, if logOnly overrides the features object, this should be documented. In addition, the import button should not be visible if that is the case.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

"@angular/core": "~7.2.12",
"@ngrx/store": "^7.4.0",
"@ngrx/store-devtools": "^7.4.0",

browser:
Google Chrome Version 76.0.3809.132 (Official Build) (32-bit)
os:
Windows 10, build 17134.950

Other information:

I would be willing to submit a PR to fix this issue

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[x] No

[santoshyadavdev]

Hi @timdeschryver ,
I am looking into it.

[santoshyadavdev]

So I was able to reproduce it, looking into code.

[santoshyadavdev]

Hi @timdeschryver ,
Just to confirm as per code if user passed the feature action it takes precedence above logOnly, so in this case import button should be visible.

[santoshyadavdev]

Need some help here, I can see the test case is passing and even it works when we set import to 'custom' but as per doc it have true/false value.

[timdeschryver]

Let's take this conversation away from the issue thread, you can expect a message from me later @santoshyadav198613 and we'll go over it.

[santoshyadavdev]

This is reproducible in redux dev tools as well raised https://github.com/zalmoxisus/redux-devtools-extension/issues/691.

[jackgllghr]

I've hit this issue too, importing our state fails this every time. Any workarounds?