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

Hello,

I use router-outlet for navigation of some pages, each of them has a form using your invisible recaptcha. When I get into one of these pages, and then move to another, I get this exception in my web browser’s console:

Uncaught TypeError: Cannot read property 'render' of null
    at Vp (recaptcha__en.js:380)
    at Np.Hk (recaptcha__en.js:381)
    at ZoneDelegate.webpackJsonp.606.ZoneDelegate.invokeTask (zone.js:414)
    at Zone.webpackJsonp.606.Zone.runTask (zone.js:181)
    at ZoneTask.invoke (zone.js:476)
    at timer (zone.js:1491)

As far as I understand, it happens since the captcha tries to render itself again on the same page, and fails to do that in that previous element since it’s not there anymore, because we just routed to a different page. Since there is no bug in recaptcha itself, I assume this issue should be taken care of in your component.

It sounds similar to this #35 issue, however I get a different exception.

Hopefully you can take a look into it and get it fixed and/or suggest me please I can go around it til then.

Thanks in advance!

[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.

[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)