lenicdev / ng-hcaptcha Goto Github PK

hi
I want use hcaptcha i get cors error

Current version doesn't work with the angular 12 application . Can you update ng-hcaptcha?

Would it perhaps be possible to expose a property to enable silent mode? Thanks!

Sometimes the captch tells me that the sire key is not valid (it is), and other times if u refresh, it works.
Getting deep in the network navigation, i figure out when the captcha works, it makes two request, but when it does not work, it makes only one.

Here it works, and there are 2 request.

Here it does not work, and there is only one req

Hi,
thank you for this component!
I wonder if it is or it will be possible to execute the captcha programmatically, as we can do with the ng-recaptcha component.
That would be really useful!

Best regards,
Ronaldo

Hi, in my app.module.ts i defined the NgcaptchaModule providing the languageCode as defined in the documentation.

In my app i handle 4 languages: english, italian, german and french. Unfortunatelly there are some texts that stays always in english, see the following example in german:

Is this a known bug that will be fixed? Is there any workaround?

Hello,

Is it possible to set the sitekey programmatically or via the component template?

Hi :)

I was using ng-hcaptcha on Angular 12 until now and it was working perfectly, I had an Angular component and a module for it where I was using it:
https://github.com/bmcsoftware/innovation-studio-developer/blob/main/22.1/test210500/bundle/src/main/webapp/libs/com-example-test210500/src/lib/view-components/captcha/runtime/captcha.module.ts#L9

@NgModule({
  imports: [CommonModule, NgHcaptchaModule.forRoot()],
  exports: [CaptchaComponent],
  declarations: [CaptchaComponent],
  entryComponents: [CaptchaComponent]
})

I tried to refactor the component with Angular 14 and change the Component to be a standalone component, so something like:

@Component({
  selector: 'com-example-test210500-com-example-test210500-captcha',
  templateUrl: './captcha.component.html',
  standalone: true,
  imports: [CommonModule, NgHcaptchaModule.forRoot()]
})

However this triggers an error during build:
In Webstorm:
TS2322: Type ModuleWithProviders<NgHcaptchaModule> is not assignable to type any[] | Type<any>

During build:

Error: libs/com-example-test210500/src/lib/view-components/captcha/runtime/captcha.component.ts:18:27 - error TS2322: Type 'ModuleWithProviders<NgHcaptchaModule>' is not assignable to type 'any[] | Type<any>'.
imports: [CommonModule, NgHcaptchaModule.forRoot()]

According to Angular I could use importProvidersFrom but in our use case. we are a Platform and we load dynamically those components, so we don't have access to boostrapapplication.

I was wondering if this was something on the radar?

I get the below error when I add : <ng-hcaptcha (verify)="onVerify($event)" (expired)="onExpired($event)"
(error)="onError($event)">
to my component.html file.

Error: ../node_modules/ng-hcaptcha/lib/ng-hcaptcha-invisible-button.directive.d.ts:39:118 - error TS2344: Type '{ siteKey: { alias: "siteKey"; required: false; }; languageCode: { alias: "languageCode"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"siteKey"' is incompatible with index signature.
Type '{ alias: "siteKey"; required: false; }' is not assignable to type 'string'.

39 static ɵdir: i0.ɵɵDirectiveDeclaration<NgHcaptchaInvisibleButtonDirective, "[ngHcaptchaInvisibleButton]", never, { "siteKey": { "alias": "siteKey"; "required": false; }; "languageCode": { "alias": "languageCode"; "required": false; }; }, { "verify": "verify"; "expired": "expired"; "error": "error"; "click": "click"; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: ../node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts:48:87 - error TS2344: Type '{ siteKey: { alias: "siteKey"; required: false; }; theme: { alias: "theme"; required: false; }; size: { alias: "size"; required: false; }; tabIndex: { alias: "tabIndex"; required: false; }; languageCode: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property '"siteKey"' is incompatible with index signature.
Type '{ alias: "siteKey"; required: false; }' is not assignable to type 'string'.

48 static ɵcmp: i0.ɵɵComponentDeclaration<NgHcaptchaComponent, "ng-hcaptcha", never, { "siteKey": { "alias": "siteKey"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "languageCode": { "alias": "languageCode"; "required": false; }; }, { "verify": "verify"; "expired": "expired"; "error": "error"; }, never, never, false, never>;

When I integrated the captcha into my angular hybrid application, it seems does not work on android or ios. I got this issue in the console:

File: https://newassets.hcaptcha.com/captcha/v1/eca8c00/static/hcaptcha-checkbox.html#id=00bumhqvnc4gr&host=localhost&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha.com&recaptchacompat=true&custom=false&tplinks=on&sitekey=xxxxxxxxxxx - Line 0 - Msg: Access to XMLHttpRequest at 'https://hcaptcha.com/checksiteconfig?host=localhost&sitekey=xxxxxxxxxx&sc=1&swa=1' from origin 'https://newassets.hcaptcha.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm not sure how to resolve this?

Thanks,

Hello,

I am trying to change the styles on the pop-up that comes out for solving a puzzle. I need it to align with my other styles.

I see there is theme property, same as the sitekey, but when I add it, it is not a valid property.

Do I need an additional step or am I missing something?

Thank you!

function loadHCaptcha(languageCode) syntax error in
if (languageCode) {
src += &hl=${languageCode};
}
browser gets confused with brackets please could you investigate it?

So, pretty straightforward, I guess. The module isn't working as expected with angular/core version 7.1.0.

package.json dependencies:

"dependencies": { "@angular/animations": "~7.1.0", "@angular/common": "~7.1.0", "@angular/compiler": "~7.1.0", "@angular/core": "~7.1.0", "@angular/forms": "~7.1.0", "@angular/http": "~7.1.0", "@angular/platform-browser": "~7.1.0", "@angular/platform-browser-dynamic": "~7.1.0", "@angular/router": "~7.1.0", "@fortawesome/fontawesome-free": "^5.4.0", "@ng-bootstrap/ng-bootstrap": "^3.3.1", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "bootstrap": "^4.3.1", "core-js": "^2.5.4", "file-saver": "^2.0.2", "ng-bootstrap-form-validation": "^3.0.3", "ngx-translate-multi-http-loader": "^2.1.2", "node-sass": "^4.12.0", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "^0.11.4", "@angular-devkit/build-ng-packagr": "~0.11.0", "@angular/cli": "~7.3.8", "@angular/compiler-cli": "~7.1.0", "@angular/language-service": "~7.1.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.5.0", "https-proxy-agent": "^2.2.4", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "ng-packagr": "^4.2.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tsickle": ">=0.29.0", "tslib": "^1.9.0", "tslint": "~5.11.0", "typescript": "~3.1.6" }

html:

<ng-hcaptcha formControlName="captcha" siteKey="<MY_SITE_KEY>" (verify)="onCaptchaVerify($event)"> </ng-hcaptcha>

Module import (omitted other modules for brevity and what not):
@NgModule({ imports: [ NgHcaptchaModule.forRoot() ]

The errors:
ERROR in node_modules/ng-hcaptcha/lib/ng-hcaptcha-invisible-button.directive.d.ts(38,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha-invisible-button.directive.d.ts(39,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts(30,9): error TS1086: An accessor cannot be declared in an ambient context. node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts(31,9): error TS1086: An accessor cannot be declared in an ambient context. node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts(47,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts(48,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.module.d.ts(8,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.module.d.ts(9,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.module.d.ts(10,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.service.d.ts(11,21): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. node_modules/ng-hcaptcha/lib/ng-hcaptcha.service.d.ts(12,22): error TS2694: Namespace '"C:/Users/felipe.izquierdo/Desktop/PITA/cloud-ui/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

No sensitive information, and I believe I got everything properly. Obviously, I might be missing something, and if the issue is lacking any relevant information, please let me know.

Stupid question, but how to refresh the hCaptcha programatically? like when hCaptcha gets expired

hi
why dont change this line below like this "@angular/common": ">=6",

After installl and import in module .. Angular 11

NgHcaptchaModule.forRoot({ siteKey: environment.hcaptcha_sitekey, }),

Error: node_modules/ng-hcaptcha/lib/ng-hcaptcha.module.d.ts:3:22 - error NG6002: Appears in the NgModule.imports of LoginModule, but could not be resolved to an NgModule class.

This likely means that the library (ng-hcaptcha) which declares NgHcaptchaModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

3 export declare class NgHcaptchaModule {
                       ~~~~~~~~~~~~~~~~
src/app/main/login/login.module.ts:47:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

47 export class LoginModule {

Please add a version that works with Angular 17. Currently, I am getting this error:

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^17.0.7" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/ng-hcaptcha
npm ERR!   ng-hcaptcha@"^2.2.0" from the root project

I am facing an issue with ng-captcha image challenge behavior. Most of the time I am getting the same type of image selection i.e. find and click on the motor vehicle image.

I am using Angular version "12.2.17" and ng-captcha version "1.3.0" in my Angular application.

hi I check npm page readme is removed

Today one of my published projects presented the error Uncaught TypeError: Cannot assign to read only property 'copy' of object '[object Object]'.

We didn't update anything so we started investigating and the error is returned by the script "https://hcaptcha.com/1/api.js?render=explicit" loaded by ng-hcaptcha.

Other projects of mine, using the same version, continue to work correctly. What could be causing this? My environment runs under Angular 15.

api.js?render=explicit:3 Uncaught TypeError: Cannot assign to read only property 'copy' of object '[object Object]'
    at Object.<anonymous> (api.js?render=explicit:3:262458)
    at 29.base64-js (api.js?render=explicit:3:263818)
    at o (api.js?render=explicit:3:221092)
    at api.js?render=explicit:3:221144
    at 2.buffer (api.js?render=explicit:3:221758)
    at o (api.js?render=explicit:3:221092)
    at api.js?render=explicit:3:221144
    at 8../buffer-global (api.js?render=explicit:3:225354)
    at o (api.js?render=explicit:3:221092)
    at api.js?render=explicit:3:221144

Hello,

We are using Angular 8.2.14. After adding NgHcaptchaModule to our project, the project is not compiling anymore.
There reason is as following:

Angular 8 is requiring to have Typescript version below 3.6.0, so upgrading is not an option.
Any suggestions please?

Hi! There is a commit for the angular 11 upgrade, is it possible to add a release for this? It would be cool, thanks!

Good day. I'm trying to implement the invisible mode using ng-hcaptcha, however the only reference I could find is to use the ngHcaptchaInvisibleButton directive on a button. The requirement is to render the h-captcha checkbox and not a button, is this achievable using ng-hcaptcha Angular component? Something like the following (passing a size or data-size property):

<ng-hcaptcha
    size="invisible"
    [languageCode]="locale"
    (verify)="onVerify($event)"
    (expired)="onExpired()"
    (error)="onError($event)">
</ng-hcaptcha>

Much appreciated in advance!

There are a few issues when a component is included on a page that is server-side rendered. Please add null checks wherever window is being referenced. Also, since you do prevent the component from loading during SSR, the following line errors:

with TypeError: Cannot read property 'unsubscribe' of undefined
at NgHcaptchaComponent.ngOnDestroy

Could you add a null check here as well? Thank you

I found following issue when using SSR :

  ngOnDestroy() {
    this.captcha$.unsubscribe();
  }

While using SSR, this.captcha$ is undefined because it's not set in ngOnInit()
The solution would be:

ngOnDestroy() {
  if(isPlatformServer(this.platformId) {
     retrun
  }
  // the rest of code 
}

Hi,
While using invisible captcha with ngHcaptchaInvisibleButton, when clicking the button, it creates 3 calls to getcaptcha, and it seems that it shows a challenge, then immediately changes it to something else.
besides that everything works, but it seems like something is wrong. maybe a bug.

Thanks!

I was trying to use your module to get hcaptcha working for our site, but ran into an issue where the language was not getting set properly on the captcha. I added a setTimeout() to the load script to give another tick which allows it to get the updated config and apply it to the captcha prior to rendering.

Hopefully you can use my patch to fix the issue.

Thanks!
Justin Mauslein

ng-hcaptcha+1.0.0-beta.3.patch.zip

When using the hcaptcha directive, the hcaptcha is well open but it is closed if we click outside the hcaptcha window. When the hcaptcha window closes there is not event trigger and the hcaptcha is not open again even if we click again in the button with the directive.

<button ngHcaptchaInvisibleButton (verify)="verifyCaptcha($event)" (expired)="expiredCaptcha($event)" (error)="errorCaptcha($event)" > Valider </button>

I added the package and my import but when trying to use the control in a template I get the "No provider for NgControl" error. Angular version is 8.2.13

How to solve this detail ? please I'm with Angular 6

I'm getting this error when my page is loading.

It appears to originate from https://hcaptcha.com/1/api.js?render=explicit

I can't find any documentation on why this error is happening or how to resolve it. I am running locally, but not using localhost. Instead, I have an entry in my hosts file for local.mydomain.com. It worked the first time I ran it, but now it's giving this error every time and the reactive form control is never updated with the captcha code.

Any ideas what would be causing this or how to fix it?

Environment details
node: v20.5.1
npm: 9.8.0
yarn: 1.22.19

Error: Error: node_modules/ng-hcaptcha/lib/ng-hcaptcha-invisible-button.directive.d.ts:39:118 - error TS2344: Type '*** siteKey: *** alias: "siteKey"; required: false; ***; languageCode: *** alias: "languageCode"; required: false; ***; ' does not satisfy the constraint ' [key: string]: string; '.
Property '"siteKey"' is incompatible with index signature.
Type ' alias: "siteKey"; required: false; ***' is not assignable to type 'string'.

39 static ɵdir: i0.ɵɵDirectiveDeclaration<NgHcaptchaInvisibleButtonDirective, "[ngHcaptchaInvisibleButton]", never, *** "siteKey": *** "alias": "siteKey"; "required": false; ***; "languageCode": *** "alias": "languageCode"; "required": false; ***; ***, *** "verify": "verify"; "expired": "expired"; "error": "error"; "click": "click"; ***, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: Error: node_modules/ng-hcaptcha/lib/ng-hcaptcha.component.d.ts:48:87 - error TS2344: Type '*** siteKey: *** alias: "siteKey"; required: false; ***; theme: *** alias: "theme"; required: false; ***; size: *** alias: "size"; required: false; ***; tabIndex: *** alias: "tabIndex"; required: false; ***; languageCode: *** ...; ***; ' does not satisfy the constraint ' [key: string]: string; '.
Property '"siteKey"' is incompatible with index signature.
Type ' alias: "siteKey"; required: false; ***' is not assignable to type 'string'.

48 static ɵcmp: i0.ɵɵComponentDeclaration<NgHcaptchaComponent, "ng-hcaptcha", never, *** "siteKey": *** "alias": "siteKey"; "required": false; ***; "theme": *** "alias": "theme"; "required": false; ***; "size": *** "alias": "size"; "required": false; ***; "tabIndex": *** "alias": "tabIndex"; "required": false; ***; "languageCode": *** "alias": "languageCode"; "required": false; ***; ***, *** "verify": "verify"; "expired": "expired"; "error": "error"; ***, never, never, false, never>;

First, thank you! This is awesome and very helpful.
I've tried for a while to get the invisible captcha to work with this but I can't seem to make it work. I was wondering if you have given any thought to including invisible captcha?

https://docs.hcaptcha.com/invisible

To include the properties for Invisible (like reCaptcha v3) and difficulty level.

Example:

NgHcaptchaModule.forRoot({
siteKey: 'YOUR_SITEKEY',
languageCode: 'de', // optional, will default to browser language
Invisible: true, //optional, true or false, --> https://docs.hcaptcha.com/invisible/
difficulty: easy //optional, easy, moderate, always on --> https://www.hcaptcha.com/post/how-hcaptcha-difficulty-settings-work
}),

Hi,

It seems the callback after this.ngHcaptchaService.verify() runs outisde angular's change detection, I have to wrap it inside this.ngZone.run() to make it work, otherwise my page doesn't update correctly.

this.ngHcaptchaService.verify()
    .subscribe({
        next: (response) => this.zone.run(() =>/* update page */)
    });

Would it be possible to make your service run the callback inside angular's zone automatically ?

I am calling an API to get the site key.
I want to show the h-captcha after that.So I have wrapped the component with a conditional

Hi Team,

ng-hcaptcha is not working in my angular application(version-8.2.14). I am using the ng-hcaptcha version "1.3.1". It is showing below errors at the time of ng serve.

ng-hcaptcha errors

ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 148:18-27
Can't import the named export 'Component' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 278:18-27
Can't import the named export 'Directive' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 275:179-192
Can't import the named export 'ElementRef' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 283:24-37
Can't import the named export 'ElementRef' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 49:26-38
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 50:27-39
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 51:25-37
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 196:26-38
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 197:27-39
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 198:25-37
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 199:25-37
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 303:22-34
Can't import the named export 'HostListener' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 163:30-36
Can't import the named export 'Inject' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 166:30-36
Can't import the named export 'Inject' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 284:30-36
Can't import the named export 'Inject' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 287:30-36
Can't import the named export 'Inject' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 360:30-36
Can't import the named export 'Inject' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 357:18-28
Can't import the named export 'Injectable' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 7:27-41
Can't import the named export 'InjectionToken' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 170:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 172:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 174:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 176:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 178:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 291:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 293:22-27
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 142:21-38
Can't import the named export 'NG_VALUE_ACCESSOR' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 155:37-54
Can't import the named export 'NG_VALUE_ACCESSOR' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 383:18-26
Can't import the named export 'NgModule' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 139:176-185
Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 165:34-43
Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 275:232-241
Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 286:34-43
Can't import the named export 'NgZone' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 15:15-25
Can't import the named export 'Observable' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 312:19-29
Can't import the named export 'Observable' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 183:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 185:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 187:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 295:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 297:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 299:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 301:22-28
Can't import the named export 'Output' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 139:198-209
Can't import the named export 'PLATFORM_ID' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 167:31-42
Can't import the named export 'PLATFORM_ID' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 275:254-265
Can't import the named export 'PLATFORM_ID' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 288:31-42
Can't import the named export 'PLATFORM_ID' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 180:22-31
Can't import the named export 'ViewChild' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 143:25-35
Can't import the named export 'forwardRef' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 156:41-51
Can't import the named export 'forwardRef' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 94:12-29
Can't import the named export 'isPlatformBrowser' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 242:12-29
Can't import the named export 'isPlatformBrowser' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 62:12-28
Can't import the named export 'isPlatformServer' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 207:12-28
Can't import the named export 'isPlatformServer' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 227:12-28
Can't import the named export 'isPlatformServer' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 139:222-240
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 275:278-296
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 354:172-190
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 379:145-163
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 147:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 277:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 356:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 382:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 140:27-50
Can't import the named export 'ɵɵngDeclareComponent' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 276:42-65
Can't import the named export 'ɵɵngDeclareDirective' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 139:27-48
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 275:42-63
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 354:25-46
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 379:24-45
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 355:26-50
Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 381:24-46
Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/ng-hcaptcha/fesm2015/ng-hcaptcha.mjs 380:24-46
Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)

package.json dependencies

"dependencies": {
"-": "0.0.1",
"@angular/animations": "8.2.14",
"@angular/cdk": "8.1.1",
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/core": "8.2.14",
"@angular/forms": "8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@angular/router": "8.2.14",
"@azure/msal-angular": "2.4.1",
"@ng-bootstrap/ng-bootstrap": "5.0.0",
"@ng-select/ng-select": "^3.0.0",
"@types/jquery": "3.3.1",
"bootstrap": "4.4.1",
"core-js": "3.1.4",
"crypto-js": "4.1.1",
"font-awesome": "4.7.0",
"g": "2.0.1",
"jquery": "3.5.1",
"msal": "0.2.3",
"ng-hcaptcha": "1.3.1",
"popper.js": "1.16.1",
"rxjs": "6.5.4",
"tree-kill": "1.2.2",
"tslib": "1.10.0",
"yargs-parser": "15.0.1",
"zone.js": "0.9.1"
},

Component html
<ng-hcaptcha
iteKey="<MY_SITE_KEY>"
(verify)="onVerify($event)"

Component typescript

constructor(private hcaptchaService: NgHcaptchaService,
) {
this.nghcaptchaService = new NgHcaptchaService({
siteKey : ''
})
}

onVerify() {
console.log("this.hcaptchaService>>>", this.hcaptchaService);
this.hcaptchaService.verify().subscribe(
(result) => {
console.log('SUCCESS', result);
},
(err) => {
console.log('FAILED', err);
},
() => {
console.log('COMPLETE');
}
);
}

app.module.ts

@NgModule({ imports: [....,
NgHcaptchaModule.forRoot() ]

One more point.
ng-hcaptcha 2.0.0 or later version i have tried but it is also not installing in my angular application. It is showing below error.
so i installed the 1.3.1 and 1.3.1 version is installed successfully.

npm install ng-hcaptcha@^2.0.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"8.2.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0" from [email protected]
npm ERR! node_modules/ng-hcaptcha
npm ERR! ng-hcaptcha@"2.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\s1pwch\AppData\Local\npm-cache\eresolve-report.txt for a full report.

I believe that I have provided the enough information related to this issue if anything further is required, please let me know.

Kindly provide the solution for this issue as soon as possible. **Thanks in advance. **

Hello !

I just realised that ng-recaptcha is not on angular 15, I don't know if someone already upgrade it but if it's not the case and you don't have time to handle it, please let me know, I can help ! 😃

There appears to be some issues with the invisible button directive.

The simplest, is there's a typo cancelBuble instead of cancelBubble.

More complex is I can't get the events to fire. I have this:
<button ngHcaptchaInvisibleButton (click)="next($event)" (verify)="onVerify($event)"

The verify event never fires. My click handler does though. Using the debugger in Chrome, The click handler fires in the directive, followed by my handler in my component and then that's it.

When I fiddled with the code & commented out the 4 lines in the click handler to stop event propagation, it started raising the verify event. It looks like one of these stops hcaptcha raising events.

 event.stopPropagation();
 event.preventDefault();
 event.cancelBubble = true;
 event.stopImmediatePropagation();

I can start a pull request for this, but I'm not sure why it's doing it to start with, or how to get around it.

Hi,
would it be possible to add the ability to hard reload only iframe element without reloading entire page? I currently using the @ngx-translate package and then I change the language, iframe element is not updated. I have already tried with component re-rendering rechnique (https://developapa.com/angular-rerender/) and replacing hl parameter in js script source, but it doesn't work as it should.

My angular 8 application has the package installed.
it is built using webpack and the project builds correctly however during runtime there is an undefined error.

The value target: i0.ɵɵFactoryTarget.Component in the file ng-hcaptcha.mjs is undefined.
All of the samples use angular cli to build and run the projects, does this package support webpack built projects?

Here is the console error

hi please add support for themes
docs

hi
can you add language codes in config module

When we use formControlName and the captcha expires, it doesn't clean the form and (expire) doesn't work too.