node.jswebpack-2recaptchatypescript2.2angular

Angular2-Recaptcha is not loading on browser back event


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]
  })

Solution

  • i think the site_key is not initialized when the component loads again

    Use APP_INITIALIZER to initialize site variables.

    Check out this link