TypeError: Converting circular structure to JSON

[jbeckton]

Just came across this issue. I can consistently reproduce this error by having my app throw an error from an unprovided service. I have a core module with a service in it that is used in my signup feature module / component (lazy loaded). When the service is removed from the providers array on the core module then this error occurs when I try and load the route to the signup component that uses it.

node v8.1.0
npm v5.4.0
Mac OS v10.12.6
Chrome Version 60.0.3112.113
99 Jeep Cherokee XJ

package.json

"@ngrx/store-devtools": "~4.0.0",

app.module.ts

!environment.production ? StoreDevtoolsModule.instrument() : [],

Error and stack trace

ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON TypeError: Converting circular structure to JSON at Object.stringify (<anonymous>) at Object.e.stringify (<anonymous>:1:9263) at stringify (<anonymous>:1:18991) at toContentScript (<anonymous>:1:20255) at Function.sendMessage [as send] (<anonymous>:1:20741) at DevtoolsExtension.webpackJsonp.../../../../@ngrx/store-devtools/@ngrx/store-devtools.es5.js.DevtoolsExtension.notify (store-devtools.es5.js:184) at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (store-devtools.es5.js:566) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._tryNext (scan.js:109) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._next (scan.js:102) at ScanSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at Object.stringify (<anonymous>) at Object.e.stringify (<anonymous>:1:9263) at stringify (<anonymous>:1:18991) at toContentScript (<anonymous>:1:20255) at Function.sendMessage [as send] (<anonymous>:1:20741) at DevtoolsExtension.webpackJsonp.../../../../@ngrx/store-devtools/@ngrx/store-devtools.es5.js.DevtoolsExtension.notify (store-devtools.es5.js:184) at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (store-devtools.es5.js:566) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._tryNext (scan.js:109) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._next (scan.js:102) at ScanSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at resolvePromise (zone.js:795) at zone.js:847 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

[dougludlow]

@jbeckton - running into this error right now. What did you do to resolve?

[dougludlow]

Nevermind, figured out the issue is triggered when any errof is thrown in the constructor of the component being navigated to. Unfortunately, the error above is swallowing the real error. Thanks for the tip, @jbeckton.

[rkrisztian]

ngrx/platform#356 is a better resolution to this problem.

[jbeckton]

@dougludlow one of the ngrx developers created a fix for this issue, the ngrx dev tools now handles the errors better, just try getting the latest release.

[edmundo096]

@dougludlow Had a similar issue, the JSON error was swallowing the real error (missed importing the a rxjs operator used on an activatedRoute).
I left a comment on ngrx/platform#356 (comment) in case anyone else drops with a similar issue while Googling.