Excessive change detection with requestAnimationFrame()

[linuxerwang]

Which ng* package(s) are the source of the bug?

ngdart

Which operating system(s) does this bug appear on?

Windows, MacOS, Linux

Which browser(s) does this bug appear on?

Chrome 114.0.5735.106

Is this a regression?

No

Description

A minimum repro of the issue is created at: https://github.com/linuxerwang/web-angular.

When the page includes a requestAnimationFrame(), all elements of the page get constantly re-evaluated, thus causing performance issue:

<div *ngIf="heavyCalc()">Hello</div>
<canvas></canvas>

lass AppComponent implements AfterViewInit {
  @override
  Future<Null> ngAfterViewInit() async {
    window.requestAnimationFrame(onFrame);
  }

  onFrame(timeStamp) {
    window.requestAnimationFrame(onFrame);
  }

  heavyCalc() {
    print('--> calculating');
    return true;
  }
}

Is there a way to suppress change detection for requestAnimationFrame? ChangeDetectionStrategy.onPush doesn't seem helping.

Thanks.

Please provide the steps to reproduce the bug

https://github.com/linuxerwang/web-angular

$ webdev serve

Verify logs In web console.

Please provide the exception or error you saw

No response

Please provide the dependency environment you discovered this bug in (run dart pub deps -s compact)

Dart SDK 2.19.6
ngdart 8.0.0-dev.2

Anything else?

n/a

[ykmnkmi]

Use NgZone.runOutsideAngular():

class AppComponent implements AfterViewInit {
  AppComponent(this.zone);

  final NgZone zone;

  @override
  Future<Null> ngAfterViewInit() async {
    zone.runOutsideAngular(() {
      window.requestAnimationFrame(onFrame);
    });
  }
}

[linuxerwang]

Awesome, it works like a charm. Thank you!