Profiler shows change detection firing continuosly

[TheCoderFish]

**Angular DevTools version (required)**:

**Angular version (required):~9.0.5

On one of my applications on starting the profiler, I get the change detection firing continuously. It also affects my application as I see my ngOnChanges being called continuously. on removing the extension my application behaves normally. the source of the initiator is " Window.addEventListener:message" and I don't have any line of code in my application that uses message.

https://file.io/Hu8YsP9BiGTb link to my saved profiler output for analysis

[BenniG82]

Same Issue here. After some debugging I found out, that there seems to be a conflict with StoreDevtools for NgRx in my case. As soon as I removed StoreDevtoolsModule.instrument() from my Module there where no more additional change detections.

Funny thing: I tried to debug the issue with the following script in index.html:

<script>
  const addEventListener = window.addEventListener;
  window.addEventListener = function (type, listener, useCapture) {
    if (type === 'message') {
      console.log('adding listener', arguments, listener.toString());
    }
    addEventListener(type, function (msgEvent) {
      if (type === 'message') {
        console.log('call listener', msgEvent);
      }
      listener(msgEvent)
    }, useCapture);
  }
</script>

Even this fixed the issue, but I don't know why. Maybe this gets twisted

[BenniG82]

I've played around some more. In my case the problem also disappears, if I disable the "Redux Devtools"-Extension in Chrome. I think the cause of the error is either StoreDevtools in Angular or _Redux Devtools_in Chrome. Even with Angular Devtools disabled I can cause a ChangeDetection, when I send the following via Chrome Console (this is a message I captured from Angular Devtools with my debug script):

window.postMessage({
  "source": "angular-devtools-backend",
  "topic": "ngAvailability",
  "args": [
    {
      "version": "11.2.11",
      "devMode": true,
      "ivy": true
    }
  ]
})

But this message only causes a ChangeDetection when both StoreDevtools and Redux Devtools are enabled.

Maybe StoreDevtools somehow thinks the messages from Angular Devtools are state changes done inside the Redux Devtools and forces Angular to do a change dectection, which is then causing another message from Angular Devtools so we end up in a infinite-loop.

Update: Even this triggers a ChangeDetection (with StoreDevtools + Redux Devtools enabled and Angular Devtools disabled)

window.postMessage({
  "source": "bennisMessage"
})

[TheCoderFish]

Yes, I would like to add that even I had redux dev tools enabled for my app and the reason my other apps were not experiencing this bug was that they did not use any state management.

[CheetahDev]

Issue confirmed here also. I should have report it on May 19th when we first tried the new dev tools and spotted the issue. Our app relies 100% on NgRx. We thought this dev tools would be a nice tool to diagnose our perf issues. But as soon as we started our app, we received something like 1000 events every 10sec. This was just crazy and impossible to work with.

[BenniG82]

@TheCoderFish @CheetahDev Could you check if even with Angular Devtools disabled/uninstalled but Redux Devtools / Store Devtools enabled you can cause a ChangeDectection with a dummy-Message:

window.postMessage({
  "source": "dummy"
})

In my app thats the case. And I think this proves, that Angular Devtools is not to blame here :) Angular Devtools justs sends some Messages which get misinterpreted by the other Devtools.

[TheCoderFish]

@BenniG82 yes i can confirm this , i added a log message in ngDoCheck and the dummy message does triggers a change detection in the app , and i removed the dev tools extension , (a new issue i am facing is the extension is getting corrupted and the extension library show the repair option). So is it the redux dev tools , cause when i repeated the same by removing the redux tools it no longer triggered a change detection cycle in my app.

[mikezks]

@mgechev, @brandonroberts: FYI, as the combination Angular Devtools and Store Devtools is a common one for bigger applications.

[Rush]

I also just discovered this issue. Very annoying. Is there any hope?

[Spielboerg]

I have also discovered this problem. After disabling all extensions except Angular DevTools*, which didn't help in my case, I was able to narrow down the problem to the Stripe integration we use in the project. So if any of you also use Stripe, try commenting out the function stripe.paymentRequest({ ... }); (docs) and check if the profiler no longer shows an infinite number of logs afterwards. In my case, this reduces the number of logs from ~100/sec to <50/total (both without any user interaction with the page).

* Tip: Instead of disabling all other extensions, just allow Angular DevTools access to incognito pages (setting can be changed in the extension details: chrome://extensions/?id=ienfalfjdbdpebioblfackkekamfmbnh) and open the app in an incognito window.