I am working in Angular Application. Recaptcha is working fine while application is initialized. After navigation to next page while pressing browser back button event angular2-recaptcha is not loading
In Package.json file i am using angular2-recaptcha
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/router": "^4.0.1",
"angular2-recaptcha": "^0.5.0",
}
login.html
<div>
<re-captcha (captchaResponse)="handleCorrectCaptcha($event)" [site_key]="siteKey" class="captcha"></re-captcha>
</div>
login.component.ts
import { ViewChild } from '@angular/core';
import { ReCaptchaComponent } from 'angular2-recaptcha';
import { Router, RouterModule } from "@angular/router";
export class RegisterComponent {
@ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
constructor(private route: Router,private service:loginservice){
}
capcha:any;
handleCorrectCaptcha(response: string) {
this.service.getCaptcha(response)
.subscribe(
res => {
this.capcha=res;
this.route.navigate(['/dashboard']);
});
}
}
Module
import { ReCaptchaModule } from 'angular2-recaptcha';
@NgModule({
imports: [...,ReCaptchaModule]
})
i think the site_key is not initialized when the component loads again
Use APP_INITIALIZER
to initialize site variables.
Check out this link