ReCAPTCHA не может найти пользовательскую функцию: onloadCallback Angular 6 Typescript

Question

Я получаю: ReCAPTCHA не может найти функцию, предоставленную пользователем: onloadCallback

У меня есть вызов API Google в индексе. html

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

В моем компонент на несколько уровней в каталоге app /, у меня есть страница проверки, на которой пользователь использует reCaptcha для проверки того, что они люди.

Вот фрагмент моего файла .ts

public siteKeyCaptcha = 'Sgsfsdfs3212424233423424dddddddddd-' <!-- FAKE KEY-->;
public reCaptchaWidgetId = 'recaptcha1';


ngOnInit() {

    this.validationCommentSuccess = false;
    this.validationCommentDanger = false;
    this.onloadCallback = this.onloadCallback.bind(this);
    try {
        grecaptcha.render(this.reCaptchaWidgetId, {
       'sitekey': this.siteKeyCaptcha,
       'callback': 'onloadCallback'
       });
    } catch (error) {
      console.log('Error on Try Catch: ', error);
    }
    this.btnValue = 'Welcome! Prove you\'re human first then click here.';

    this.sessionStorageService.set('appInsIDSectId', this.temporaryPath);
    this.getFingerPrint().then(data => console.log('DEVICE FINGER PRINT: ', data));

    // This is needed to get the reCaptcha working or it'll say it can't find it
    this.onloadCallback(grecaptcha.getResponse());
}

Вот фрагмент из файла. html

    <form id="form-validation" novalidate method="post">
      <div class="login__brand"></div>
      <h1 class="h3 my-3 text-center">Welcome to Digital Harbor</h1>
      <h2 class="h2 my-2 text-center">Click the button below to enter Set Forms</h2>


      <div id="recaptcha1" class="g-recaptcha" 
           data-expired-callback="disableBtn"
           data-sitekey='Sgsfsdfs3212424233423424dddddddddd-' <!-- FAKE KEY-->
           data-callback="enableBtn"
           data-expired-callback="expiredCallback"></div>

      <button class="mt-3 btn btn-lg btn-primary btn-block"
              id="submitValidateBtn"
              type="submit"
              (click)="validation()"
              [innerHTML]='btnValue'></button>

    </form>  

Код в файле .ts

  ngAfterViewInit() {

    this.submitbtn = document.getElementById('submitValidateBtn') as HTMLElement;
    // Start with a disabled Submit Button
    this.disableBtn();
      window.enableBtn = (data: any) => {
        console.log('Inside Global Callback Method Enable ', data);
        this.enableBtn();
      };
      window.disableBtn = (data: any) => {
        if (data === 'expiredmsg') {
          console.log('Inside Global Callback Method Disable ', data);
          this.submitbtn.innerText = 'Oops! Please reverify to continue.';
        }
        this.disableBtn();
      };
  }

  ngAfterViewChecked() {

  }

  public async getFingerPrint() {
    this.deviceFingerPrint = await this.httpService.getDeviceFingerprint();
    return this.deviceFingerPrint;
  }

  public onSubmit(event: any) {
    console.log('EVENT onSubmit: ', event);
    if (this.checkCaptcha && grecaptcha.getResponse(this.reCaptchaWidgetId) != "") {
      this.submitted = true;
      this.enableBtn();
    }
  }

  public verifyCallback(response: any) {
    console.log('ReCaptcha Response Verified: ', response);
    if (grecaptcha.getResponse(this.reCaptchaWidgetId).length !== 0) {
      this.checkCaptcha = false;
    } else {
      this.checkCaptcha = true;
    }
  }

  public onloadCallback(captchaResponse: string) {
    if (captchaResponse === "") {
      console.log('grecaptcha is NOT ready!');
    } else {
      console.log('grecaptcha is ready!');
      this.recaptcha.verifyUserResponse(captchaResponse);
      this.verifyCallback(captchaResponse);
    }
  }

  public expiredCallback() {
    this.submitbtn.innerText = 'EXPIRED! Click Captcha to prove you\'re human again!';
    this.submitbtn.classList.add('disableBtn');
    this.submitbtn.classList.remove('enableBtn');
    this.submitbtn.setAttribute('disabled', 'disabled');
  }

  public disableBtn(): void {
    this.submitbtn.classList.add('disableBtn');
    this.submitbtn.classList.remove('enableBtn');
    this.submitbtn.setAttribute('disabled', 'disabled');
    this.submitbtn.innerText = 'Click Captcha to prove you\'re human!';
  }

  public enableBtn(): void {
    this.onloadCallback(grecaptcha.getResponse(this.reCaptchaWidgetId));
    this.submitbtn.classList.add('enableBtn');
    this.submitbtn.classList.remove('disableBtn');
    this.submitbtn.removeAttribute('disabled');
    this.submitbtn.innerText = 'Welcome! Prove you\'re human first then click here.';
  }

Моя цель:

1. Проверить код и ВКЛЮЧИТЬ кнопку (отправить)
2. После проверки я не хочу получать эту ошибку в консоль отладки.

ReCAPTCHA не может найти пользовательскую функцию: onloadCallback

и

ReCAPTCHA не может найти пользовательскую функцию: expiredCallback

Вопрос:

Это потому, что вызов сценария JS в index. html слишком далеко вверх по пищевой цепочке, чтобы найти onloadCallback?

I попытался переместить его в файл HTML, но виджет reCaptcha никогда не отображает

Спасибо