Remove dev tools event listener from zone.js detection

[thfsilvab]

Which @ngrx/* package(s) are the source of the bug?

store-devtools

Minimal reproduction of the bug/regression with instructions

• Add StoreDevtoolsModule.instrument({}) to app.module.ts, just like in the example
• Install Angular DevTools
• Through Angular DevTools, start the profiler in the example
• The profiler will show a lot of change detection events caused by Window.addEventListener:message
• Remove StoreDevtoolsModule.instrument({}), repeat step 3, the change detection events won't show up anymore

Minimal reproduction of the bug/regression with instructions

It's expected that the StoreDevtools doesn't trigger any change detection.
Change detection can be costly if any component do some kind of 'heavy work' like rendering multiple components with ngForOf, even if StoreDevtools logs only in development, it's still a big overhead for a development environment, depending on the size and complexity of the project.

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

NgRx: 15.4.0
Angular: 15.2.3
Node: 16.16
Browser: Microsoft Edge 112.0.1722.34 (64-bit)
Operating system: Windows 10

Other information

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

• Yes
• No

[brandonroberts]

Thanks @thfsilvab. I don't see in our code where we are using addEventListener directly for store-devtools.

What's the proposed fix?

[exequiel09]

This happens if the Redux Devtools is enabled when on load. You need to change the value of Site Access to On Click

Also check this conversation in main Angular repo: angular/angular#45572 (comment)