【Angular】継承クラスのasyncメソッドで親クラスのメソッドを呼ぼうとすると無限ループする。。。

Angular9で開発を行っている際に、問題にぶちあたったのでメモ。

現象

継承クラスにて、親クラスのメソッドをオーバーライドしたら無限ループするようになった。

テストコード

• 親クラス
  • 対象のメソッドをasyncで定義

app.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class AppService {
    constructor() {}

    async test() {
        console.log('parent');
    }
}

• 子クラス
  • 親メソッドをオーバーライドし、親のメソッドを呼び出す

app-ex.service.ts

import { Injectable } from '@angular/core';
import { AppService } from './app.service';

@Injectable()
export class AppExService extends AppService {
    constructor() {
        super();
    }

    async test() {
        console.log('child')
        super.test();
    }
}

• コンポーネントから子クラスのメソッドを呼びだす

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppExService } from './app-ex.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'extends-test';

  constructor(private service: AppExService) {
  }

  ngOnInit() {
      // 子クラスのメソッド呼び出し
      this.service.test();
  }
}

アクセスしてみる

Chromeの場合

• 親／子ともにログがちゃんと出ている

Edgeの場合

• 子クラスのtest()がめちゃめちゃ呼ばれる
• 親のログが出ない

ログを見る限りでは、自分を再帰呼び出ししているっぽい。。。

superの参照がthisに変わってるのかな。。。
誰か解決方法を教えてほしい(´Д｀)

とりあえず、オーバーライドしたメソッドでなければ親クラスのメソッド呼べそうなので、それで回避することにします。。。