're-captcha' is not a known element with Angular 6 and ng-recaptcha 4.0.0 beta

[mortenmoulder]

Summary

I'm submitting a:

• [x] bug report

Description

I have installed the "ng-recaptcha": "4.0.0-beta.1" version in my Angular 6 project, included RecaptchaModule.forRoot() under imports in NgModule and I have the following HTML:

<form>
<!-- form goes here -->
</form>
<re-captcha #captchaRef="reCaptcha" size="invisible" badge="inline" (resolved)="$event && sendMail($event)"></re-captcha>

However, I get this error:

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "reCaptcha" ("abled]="form.invalid" (click)="captchaRef.execute()">Send mail</button>
</form>
<re-captcha [ERROR ->]#captchaRef="reCaptcha" size="invisible" badge="inline" (resolved)="$event && sendMail($event)"></re-"): ng:///MyModule/MyComponent.html@21:12
're-captcha' is not a known element:
1. If 're-captcha' is an Angular component, then verify that it is part of this module.
2. If 're-captcha' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("accent" [disabled]="form.invalid" (click)="captchaRef.execute()">Send mail</button>
</form>
[ERROR ->]<re-captcha #captchaRef="reCaptcha" size="invisible" badge="inline" (resolved)="$event && sendMail($e"): ng:///MyModule/MyComponent.html@21:0

If I comment out the <re-captcha></re-captcha> element, it won't show an error (but won't work for obvious reasons).

Lib versions:

• ng-recaptcha: 4.0.0-beta.1
• Angular: 6.0.4
• Typescript (tsc --version): ~2.7.2

[mortenmoulder]

Turns out I had to do this in shared.module.ts:

@NgModule({
    imports: [
        RecaptchaModule.forRoot()
    ],
    exports: [
       RecaptchaModule
    ]
})

Now it works flawlessly. That's so weird.

[wniar]

Hi,

I have the same problem in current version (4.0.0). My app.module.ts looks like this:

@NgModule({ imports: [ RecaptchaModule.forRoot(), RecaptchaFormsModule, AdditionalModule ] })

When I use recaptcha in component in additional.module.ts i got error. When i move imports Recaptcha modules to additional.module.ts everything work fine but Im not sure if service will work as singeltone?