I am using priming-captcha for my application. It is working fine when I am routing the page through some other page. But the captcha doesn't show when I am loading page directly (sometime it shows grecaptcha.render is not a function in console)

As specified in primefaces I have added the script (<script src=" ... tRecaptcha" async defer></script>) in index.html.

Also, I have added this (<p-captcha id="captcha" siteKey="sitekey" label="Captcha" (onResponse)="func($event)"></p-captcha>) in my some-component.html.

I am trying to explicitly render it. But still no luck. Can someone please help me with a sample onLoad function and where to implement. Whether it should be implemented in script of index.html or somewhere else.

index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <base href="/"> <script src="" async defer></script> </head> <body> <app-root></app-root> </body> </html>

password-recovery.component.html

<div class="p-col-11"> <p-captcha id="captcha" siteKey="sitekey" (onResponse)="storeRecaptchaResponse($event)" #captcha></p-captcha> </div>

password-recovery.component.ts

storeRecaptchaResponse(event) { this.recaptchaSubmitted = true; this.recaptchaResponse = event.response; console.log('Captcha Response ' + this.recaptchaResponse); }