Compatibility issue between store-devtools and router-store

[rernens]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

What is the current behavior?

when using @ngrx/store-devtools and @ngrx/router-store simultaneously, application fails to load with a random error in shim.js in Map.toJSON or String.toJSON.
Application loads without error when removing router-store or store-devtools without other changes.

Expected behavior:

router-store should be working with store-devtools

Minimal reproduction of the problem with instructions:

1. use angular-advanced-seed and convert it to use @ngrx v4 as per migration guide and check that the base application works properly
2. install @ngrx/router-store and add StoreRouterConnectingModule to the web.module.ts import section after StoreModule.forRoot, application fails
3. remove StoreDevtoolsModule.instrument() from import in web.module.ts, application starts properly

Version of affected browser(s),operating system(s), npm, node and ngrx:

MacOs X Sierra 10.12.6

angular 4.3.6

Chrome : Version 60.0.3112.113 (Build officiel) (64 bits)
Redux Devtools Chrome Extension : 2.15.1

@ngrx/effects: 4.0.5
@ngrx/router-store: 4.0.4
@ngrx/store: 4.0.3
@ngrx/store-devtools: 4.0.0

Other information:

[pietmichal]

My suggestions:

1. Create Custom Serializer to get necessary data. Default serializer provides whole router state which might contain circular structure leading to dev-tools' crash.
2. Sometimes errors in dependency injection might trigger a misleading error related to dev-tools. Remove the dev-tools module from your app and check if everything is fine first.

[rernens]

@MichalCafe

Had already tried without the dev-tools and everything was working just fine.

I used your custom serializer approach and it works.

Thank you very much.