Has no exported member "ReCaptchaComponent"

Question

Has no exported member "ReCaptchaComponent"

andyhu92 opened this issue 8 years ago · 11 comments

When try to access the component methods, the import
import { ReCaptchaComponent } from 'angular2-recaptcha'; is giving this error : (...node_nodules/angular2-recaptcha/index) Has no exported member "ReCaptchaComponent".
(My Angular2 Version: 2.4.9.)

My solution is we can just use any template reference variable to access the ReCaptcha and call the method. (Although no IntelliSense)

In View
<re-captcha site_key="your site key" (captchaResponse)="handleCorrectCaptcha($event)" #recaptcha></re-captcha>

In Component

@ViewChild("recaptcha") captcha: any;

and then we can call the method this.captcha.reset(); Hope this can help.

Answer 1 · 2017-03-28T22:25:40.000Z

I have tried the above solution but my app still won't compile for me. Any other suggestions?
I'm using Angular4...

Or @andyhu92 , are you saying you took out all the RecaptchaComponent references in the ts file and only used the ViewChild?

Answer 2 · 2017-03-29T02:25:52.000Z

@bavanyo Yes, I only use the ViewChild, you can see I declared variable captcha as 'any' type. What error message you got when complied?

Answer 3 · 2017-03-29T05:43:12.000Z

ViewChild is the only way as of now to access captcha component. I know it's not ideal but alternates are welcome :)

Answer 4 · 2017-03-29T05:44:24.000Z

What is not ideal about ViewChild? That is the Angular native way of getting a reference to components and accessing their members. I think it is perfect 😄

Answer 5 · 2017-03-29T05:47:51.000Z

Well, it's not ideal in a sense that we have to access the class methods indirectly i.e. through the view. Which is not conventional. I would rather have a way to access class methods directly through the class instance instead of view instance. What do you think about it?

Answer 6 · 2017-03-29T05:50:22.000Z

Instance specific methods should be accessed via the component/ViewChild, I think that is 100% correct, convenient and ideal 😄

Global methods (i.e. that relate to the globally loaded Google library and not one specific reCAPTCHA) should be accessed by injecting the service, which is why I exported it from the library in the latest PR.

Which methods would be candidates for export via the service?

Answer 7 · 2017-03-29T06:16:53.000Z

I guess that makes sense as component methods are instance specific. And I cannot think of anything else but the issues with the global identifiers that needs to be resolved through the service.

Answer 8 · 2017-03-29T20:59:00.000Z

It is basically working, now, with your work around @andyhu92. Thank you!!!

Answer 9 · 2017-03-29T21:23:24.000Z

@bavanyo Did you define the handleCorrectCaptcha function in your component? It depends on what name you gave to your function that handle the captchaResponse output.

<re-captcha site_key="your site key" (captchaResponse)="yourHandleResponseFunction($event)" #recaptcha></re-captcha>

Answer 10 · 2017-03-29T21:31:44.000Z

@andyhu92 I actually just removed it.. I only needed to test that the response was returned via #recatcha.
Thx!! It's all good now!

Answer 11 · 2017-03-30T02:39:01.000Z

FYI you can also import the source file like this:

import { ReCaptchaComponent } from 'angular2-recaptcha/lib/captcha.component';

While it would be better as a solution to export the component from the angular2-recaptcha.ts barrel, this will allow you to work-around the issue for the short term, with full type-safety.