Getting error when recaptcha is not rendered

[rohitsodhia]

I have a recaptcha in a div that's hidden until I need the form. I'm using a *ngIf to show or not show the form. When the default state is shown, no problem. When the default state is hidden, instead, I get:

ReCAPTCHA placeholder element must be an element or id

Admittedly, I'm not great at debugging JS, but I tried searching online for what may be an issue, and couldn't find anything. I'm hoping you may be able to help me figure out where I may have gone wrong? Given nothing's rendered yet, I'm confused why it'd be trying to place one?

[dockleryxk]

I'm not sure exactly why this might be, but have you tried using [hidden] or setting the style of the div to display:none in the component.ts based on your variable you're using in your *ngIf? That's what I would do

[rohitsodhia]

I'm planning on using hidden for the time being, but the issue is on other pages where there is no form (and thus no recaptcha) I'm still getting this error. Which now makes me think I'm doing something wrong.

[rohitsodhia]

So I realized I can't use hidden in my code without it causing other issues, but I've been trying to debug, and what I'm seeing is that even though the parent of the parent containing the ng-recaptcha component isn't being rendered (via the *ngIf), ngAfterViewInit is still firing, causing renderRecaptcha to fire, and failing, because there is no ng-recaptcha component in the view, and thus it never got the id to add the recaptcha to.

I'm not really all that experienced, but if the component isn't yet in the view (thanks to something like *ngIf, shouldn't ngAfterViewInit not fire?

[DethAriel]

Thank you for submitting this, @rohitsodhia , and for doing initial triaging! I've tried to reproduce this error in plunker (see here), but my attempt was unsuccessful. Could it be that there is something else in your scenario, that is different from this example?

[rohitsodhia]

Looking at that plunker vs what I have, I see it's because I have code separated into modules. I noticed that in the readme, there is a link saying more information on modules later, though it doesn't go anywhere. I created a quick repo reproducing the error in a clean environment. I'm hoping that it's just a case of me not using your project correctly or perhaps something about Angular I don't yet understand. Admittedly, I tried to download and debug the package myself to get into the open source community, but alas, tis not so.

[DethAriel]

@rohitsodhia sorry for not responding for a while. Were you able to resolve this issue?

[rohitsodhia]

No problem. And no, I wasn't. After making the repo I linked above, I ended up working on a different feature and haven't been back to this since.

[brgaulin]

I'm also seeing this error where I'm using component factory to create a component(works ok) then if I destroy that component, and make it again later(probably being reused?) I get the ReCAPTCHA placeholder element must be an element or id error. Its a bit cumbersome to reproduce in plunkr, but I'll see if I can dig something up =)

Update: Most Likely unrelated my bug, and my own doing. It looks in my component factory, angular is creating the component before putting anything in the DOM, and since the element isn't in the document, well, I get the error that it isn't there.

[brgaulin]

After poking around for a bit, without brute forcing it(try catch then break when we actually render), not sure if there is a good way out in my scenario. Angular(4) appears to be rendering my DOM internally, and then appending it to the real DOM, which will never work. And I'm assuming you are stuck in a similar issue, where, with the subcomponent that way the modal renders the stuff and then hides it, then triggers the afterViewInit.

[DethAriel]

@rohitsodhia @brgaulin looks like this issue will be solved by #77 (tested in locally and with the example provided by @rohitsodhia ).

[brgaulin]

Looks good. To follow up. My bug was how I was rendering the captcha.

I was creating the component with a factory. Then adding it to a view. When I inverted this so that the parent component created it. It was much happier.

This commit also looks great!

Thanks for the follow up!!