Canvas + Angular 5 requestAnimationFrame Crashing

Question

Я пытался анимировать некоторые элементы на холсте в Angular v5.2.10, используя canvas для одного компонента, и у меня были проблемы с requestAnimationFrame.

Для первых 4000 кадров, которые зарегистрированы в console.log (), анимация проходит гладко. После 8000 кадров приложение вылетает. Я сгенерировал простое приложение с angula cli v1.6.7 и добавил этот компонент, и он по-прежнему приводит к сбою приложения после регистрации 8000 кадров.

Я новичок в canvas и запускал это приложение в Vanillajs, и это было нормально. Есть ли что-то, чего мне не хватает при анимации холста на Angular?

Я ценю любые отзывы.

Вот код для моих компонентов.

animation.component.ts:

  @ViewChild('myCanvas') canvas: ElementRef;
  public ctx: CanvasRenderingContext2D;

  width: number = 320;
  height: number = 480;

  frames: number = 0;

  ngAfterViewInit(){
    this.main();
  } 

  main(){
    this.ctx = <HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
      // run Game
    this.run();
  }

  run(){
    this.update();
    this.render();

    requestAnimationFrame(()=> this.run());
  }

  update(){
    console.log(this.frames);
    this.frames++;
  }

  render(){
   // Image would render here
  }

animation.component.html

<canvas 
    #myCanvas width={{width}} height={{height}}></canvas>

Обновление : я проверил это с помощью снимка кучи, чтобы проверить утечки памяти, но никаких изменений не происходит, когда приложение находится в кадре 0 и кадре 5000

Обновление : я настроил RequestAnimationFrame для запуска вне зоны zone.js, как показано здесь. https://github.com/angular/angular/issues/8401.

this.ngZone.runOutsideAngular(() => { 
 let loop = () => {       
    this.update();         
    this.render();
    requestAnimationFrame(loop);    

  };

  requestAnimationFrame(loop);  
}

Но анимация все равно вылетает на 8000 кадре.