Ionic 5 Google Recaptcha don't show - ng-recaptcha

Question

I want to create a web app with a registration and the Google Recaptcha. I have oriented on this example:

I want to use the normal version use, but the Google Recaptcha will not display in the HTML. what do I wrong? Here is my code, is something missing pls write to me.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, RecaptchaModule],
  providers: [
    StatusBar,
    SplashScreen,
    {
      provide: RECAPTCHA_SETTINGS,
  useValue: {
    siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
  } as RecaptchaSettings,
},
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {}

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <re-captcha (resolved)="resolveCaptcha($event)"></re-captcha>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { RecaptchaModule } from 'ng-recaptcha'; // I don't if I need this import in this file 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  resolveCaptcha(event)
  {
    console.log(event)
  }

}

Thanks for the help.

Answer 1

I have found an answer for my problem:

*.html

<re-captcha (resolved)="resolved($event)"></re-captcha>

*.page.ts

  resolved(response: string) {
    console.log(`Resolved captcha with response: ${response}`);    if(response != null)
    if(response != null && response != undefined) {
      this.captchaPassed = !this.captchaPassed;
    }
  }

*.module.ts

import { RecaptchaComponent, RECAPTCHA_SETTINGS, RecaptchaSettings, RecaptchaModule } from 'ng-recaptcha' // muss  hinzugefühgt werden /** nur wenn es auf einer seite sein soll */

@NgModule({
  imports: [
    CommonModule,
    ...
    RecaptchaModule,
  ],
  declarations: [RegisterPage],

  providers: [
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: {
        siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
      } as RecaptchaSettings,
    },
  ],
})