Google Recaptcha <re-captcha> si not a known element

Issue

I am trying to put a recaptcha in my app, but I can't. I have followed the tutorial from the library (https://www.npmjs.com/package/ng-recaptcha/v/4.1.0). I don't understand what I'm doing wrong. I've searched forums for similar questions, but can't find any solutions. Thanks

Error:

Error: Uncaught (in promise): Error: Template parse errors:
're-captcha' is not a known element:
1. If 're-captcha' is an Angular component, then verify that it is part of this module.
2. If 're-captcha' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<re-captcha (resolved)="resolved($event)" siteKey="key..."></re-cap"): ng:///LoginPageModule/LoginPage.html@0:0

App.module:

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 { HttpModule } from '@angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '@ionic/Storage';
import { Network } from '@ionic-native/network/ngx';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MobileAccessibility } from '@ionic-native/mobile-accessibility/ngx';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { NgxGaugeModule } from 'ngx-gauge';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { File } from '@ionic-native/file/ngx';

import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';


import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';


import { RecaptchaModule } from "ng-recaptcha";



@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    RecaptchaModule.forRoot(),
    HttpModule,
    IonicStorageModule.forRoot(), 
    IonicModule.forRoot(), 
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    NgxGaugeModule,
    HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
    ],
  providers: [
    StatusBar,
    MobileAccessibility,
    FileOpener,
    File,
    PostProvider,
    SplashScreen,
    Network,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    BarcodeScanner
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

login.page.ts :

resolved(captchaResponse: string) {
    console.log(`Resolved captcha with response: ${captchaResponse}`);
  }

login.page.html :

<re-captcha (resolved)="resolved($event)" siteKey="key (6Lf...)"></re-captcha>

Solution

You just to do import RecaptchaModule where your LoginPage component is imported.

Answered By - Aman Gojariya