Google Recaptcha <re-captcha> si 不是一个已知的元素

Question

我想把一个验证码在我的应用程序，但我不能。我遵循了库(https://www.npmjs.com/package/ng-recaptcha/v/4.1.0)中的教程。我不明白我做错了什么。我在论坛上搜索过类似的问题，但找不到任何解决方案。由于

错误:

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>

Answer 1

您只需执行import RecaptchaModule你的LoginPage组件已导入。