Getting error on local browser reload

Summary

I’m submitting a:

• bug report
• feature request
• question / support request
• other

Description

I am using ng-recaptcha in two pages of my application, when I refresh my browser I get the following error:

Uncaught Error: ReCAPTCHA placeholder element must be empty
    at Object.or [as render] (recaptcha__pt_br.js:384)
    at RecaptchaComponent.webpackJsonp.../../../../ng-recaptcha/recaptcha/recaptcha.component.js.RecaptchaComponent.renderRecaptcha (recaptcha.component.js:79)
    at SafeSubscriber._next (recaptcha.component.js:26)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at BehaviorSubject.webpackJsonp.../../../../rxjs/Subject.js.Subject.next (Subject.js:55)
    at BehaviorSubject.webpackJsonp.../../../../rxjs/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:44)
    at window.ng2recaptchaloaded (recaptcha-loader.service.js:25)

After this error if I click to navigate to another page I got another error and the application dies:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Invalid ReCAPTCHA client id: 0
Error: Invalid ReCAPTCHA client id: 0
    at Object.qr [as reset] (recaptcha__pt_br.js:386)
    at recaptcha.component.js:73
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
    at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (core.es5.js:3844)
    at RecaptchaComponent.webpackJsonp.../../../../ng-recaptcha/recaptcha/recaptcha.component.js.RecaptchaComponent.grecaptchaReset (recaptcha.component.js:73)
    at RecaptchaComponent.webpackJsonp.../../../../ng-recaptcha/recaptcha/recaptcha.component.js.RecaptchaComponent.ngOnDestroy (recaptcha.component.js:33)
    at callProviderLifecycles (core.es5.js:11208)
    at callElementProvidersLifecycles (core.es5.js:11177)
    at callLifecycleHooksChildrenFirst (core.es5.js:11161)
    at Object.qr [as reset] (recaptcha__pt_br.js:386)
    at recaptcha.component.js:73
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:141)
    at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (core.es5.js:3844)
    at RecaptchaComponent.webpackJsonp.../../../../ng-recaptcha/recaptcha/recaptcha.component.js.RecaptchaComponent.grecaptchaReset (recaptcha.component.js:73)
    at RecaptchaComponent.webpackJsonp.../../../../ng-recaptcha/recaptcha/recaptcha.component.js.RecaptchaComponent.ngOnDestroy (recaptcha.component.js:33)
    at callProviderLifecycles (core.es5.js:11208)
    at callElementProvidersLifecycles (core.es5.js:11177)
    at callLifecycleHooksChildrenFirst (core.es5.js:11161)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

If I publish it on my FTP server, it doesn’t happen. I registered these on the recaptcha domains:

<my app domain>
localhost
127.0.0.1

My code: Index HTML:

<script src='https://www.google.com/recaptcha/api.js'></script>

Recover password HTML:

<re-captcha (resolved)="signedRecaptcha()" siteKey="<MY_KEY_HERE...>"></re-captcha>

My SharedModule where I import ng-recaptcha:

const CUSTOM_MODULES = [
    ... ,
    RecaptchaModule
];

imports: [CommonModule, FormsModule, CUSTOM_MODULES],
providers: [RecaptchaLoaderService]

Couldn’t reproduce it on Punklr because it’s a error on browser reload 😕

Lib versions:

• ng-recaptcha: ^3.0.2
• Angular: 4.4.4
• Typescript (tsc --version): 2.4.0

[DethAriel]

@cassianomon did you try that, and if so - has it fixed the issue?

[DethAriel]

@cassianomon are you adding the recaptcha script reference yourself? If that is the case - try removing it from your index.html, the RecaptchaLoaderService will add it for you.

My assumption is that the script that you are loading, and the one that RecaptchaLoaderService is adding are conflicting with one another, and one of them should be removed. I’d suggest to remove yours, but if you feel strongly about leaving it in place - refer to the Loading the reCAPTCHA API by yourself section of the readme