Second Page Loads, captcha not displayed

[brassier]

I've pulled in this component and it works great. I have run into one issue. When displaying the page with the captcha, then navigating away from this page and then going back, the captcha isn't shown on the second load of the page. No console errors or anything.

Any idea what could cause that?

[DethAriel]

Hi, @brassier , and thx for submitting this! If you could come up with plunker that reproduces the issue, it would help tremendously in debugging it.

[brassier]

I'm fairly new to Angular, so there's a good chance this is from a mistake I'm making. That said, I don't have time to throw together a plunker, but here is some more info:

I'm using Ionic:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : android 6.1.2 browser 4.1.0 ios 4.3.1
Ionic Framework                 : ionic-angular 3.5.2

Installed the module:

npm i ng-recaptcha --save

Incorporated into app.module.ts:

import { RecaptchaModule } from 'ng-recaptcha';
....
@NgModule({
 declarations: [
DriverApp, ...
 ],
 imports: [
IonicModule.forRoot(DriverApp, {
  activator: "ripple"
}),
BrowserModule,
HttpModule,
RecaptchaModule.forRoot()
 ],
 ....

Added to page.html:

          <ion-item>
            <re-captcha *ngIf="showCaptcha" #captchaRef="reCaptcha" siteKey="Snip!" [size]="captchaSize" (resolved)="captchaResolved($event)"></re-captcha>                
          </ion-item>

Added to page.ts:

import { RecaptchaModule } from 'ng-recaptcha';
import { RecaptchaFormsModule } from 'ng-recaptcha/forms';
...
 captchaResolved(captchaResponse:string){
    this.loggingService.debug("Valid captcha Code: " + captchaResponse)
    this.captchaCode = captchaResponse;
  }

[clement94]

Hello, I reproduce same problem. I execute recaptcha on my component then I navigate to a new route. If I go back in my browser history and revalidate the previous form to execute recaptcha a second time, catcha challenge is not print. This problem occurs only when size is invisible.

I have the following error in my console :

ERROR TypeError: Cannot read property 'style' of null
at ei (recaptcha__fr.js:108)
at Iq. (recaptcha__fr.js:373)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499)
at ZoneTask.invoke (zone.js:488)
at timer (zone.js:2040)