Bug: Using ng-recaptcha in different components on the same page navigated by router-outlet about ng-recaptcha

[cihy2]

This also happens to me.

Uncaught TypeError: Cannot read property 'render' of null
    at Vp (recaptcha__pl.js:394)
    at Np.Hk (recaptcha__pl.js:395)
    at ZoneDelegate.invokeTask (zone.js:414)
    at Zone.runTask (zone.js:181)
    at ZoneTask.invoke (zone.js:476)
    at timer (zone.js:1491)

[Rob-Shnayder]

It seems that this issue has resolved itself due to a new release of recaptcha from google. Version r20170515x was the one causing issues. This morning i checked and it is now version r20170524165316.

[john-boy]

I have a suggested workaround. Move the re-captcha element outside the scope of the router outlet. I used the application component as the host. Then you can activate/deactivate using service communication as described in https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service to coordinate the visibility of the element and transmit the result of the recaptcha operation to the component inside the router outlet.

[john-boy]

I have the same error as described by TamirGit. This creates havoc with router-outlet forms. Please escalate this issue so we can get a resolution. After the TypeError is thrown the recaptcha control is not rendered again...forcing the application to reload is the only recourse to restoring normality.

[Rob-Shnayder]

I am also getting this error. Happening in all environments (most importantly prod). I have the recaptcha on my landing page. It seems that when you complete the recaptcha and route to another page, the recaptcha tries to render itself again. But the element is no longer there, so it throws a 'Cannot read property 'render' of null' error.

Full error:

main.bundle.js:65243 TypeError: Cannot read property 'render' of null
    at Vp (recaptcha__en.js:380)
    at Np.Hk (recaptcha__en.js:381)
    at ZoneDelegate.invokeTask (main.bundle.js:96549)
    at Object.onInvokeTask (main.bundle.js:61485)
    at ZoneDelegate.invokeTask (main.bundle.js:96548)
    at Zone.runTask (main.bundle.js:96449)
    at ZoneTask.invoke (main.bundle.js:96617)

[DethAriel]

Guys, thx for submitting this. If I were you I would follow @john-boy suggestion for now. Or feel free to submit a PR with a fix for that

[TamirGit]

@john-boy I have no idea how to implement your suggestion, can you please share a simple example ? I would really appreciate it.

@DethAriel thank you for your reply, do you think you will be able to fix that in a reasonable time ? (let's say few weeks). In addition, it would be nice to inform this issue in the main page with a suggestion example and explanation of a workaround.

[DethAriel]

@TamirGit the thing is - reCAPTCHA is not supposed to be present multiple times on a single page, it's just not something is was designed for. I can work on hacking something around that, a couple weeks might be a good estimate for getting this sorted out.

[TamirGit]

Oh my, you're right! that's why in my last attempt to understand the cause of the problem, I moved between only one page containing the captcha and another that doesn't, and nothing appeared in the console. Thank you for updating us, I'm glad it works now and we don't have to work to fix it :)

[DethAriel]

@Rob-Shnayder that's great news indeed! Thank you for an update

[DethAriel]

Closing since fixed in reCAPTCHA