Error loading captcha with angular 6

[aceleghin]

[ X ] bug report => Search github for a similar issue or PR before submitting

I am using primeng captcha with angular 6 and when I try to directly load the page that has captcha confirmation I have this error:

ERROR TypeError: window.grecaptcha.render is not a function at Captcha.push../node_modules/primeng/components/captcha/captcha.js.Captcha.init (captcha.js:42) at Captcha.push../node_modules/primeng/components/captcha/captcha.js.Captcha.ngAfterViewInit (captcha.js:32)

I have only initialized the captcha in my index.html:
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

But it works if I route to this page from another page.

• Angular version: 6

[aceleghin]

@cagataycivici please it's urgent, you have the same error in your documentation:
primeng captcha

[LoicDelorme]

@cagataycivici same issue for me... If you refresh the page, the component doesn't work anymore. Could you please fix that behavior?

[kisscool62]

@LoicDelorme same issue here

[zenoxs]

It annoys me, i have to use an other dependencies to make reCapatcha work.
Thanks you for taking a look at this issue 🙏

[aceleghin]

No one is listening to us...

[drenda]

Same issue here. Do you have some updates about the issue? Thanks

[JacobSiegle]

I run into the same issue and use a timeout to delay the PrimeNG component from loading which fixes it for my users (gives time for the captcha script to load).
setTimeout(() => { this.showCaptcha = true; }, 200)

Comment tag to look further into if I get time. PrimeNG component needs a hook to only attempt the captcha calls when the script is available.