lenicdev / ng-hcaptcha Goto Github PK
View Code? Open in Web Editor NEW:fire: hCaptcha Component for Angular
Home Page: https://www.npmjs.com/package/ng-hcaptcha
License: MIT License
:fire: hCaptcha Component for Angular
Home Page: https://www.npmjs.com/package/ng-hcaptcha
License: MIT License
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.
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!
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.
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
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?
Hi! There is a commit for the angular 11 upgrade, is it possible to add a release for this? It would be cool, thanks!
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
}),
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>
hi
can you add language codes in config module
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?
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
hi
why dont change this line below like this "@angular/common": ">=6",
Would it perhaps be possible to expose a property to enable silent mode? Thanks!
hi please add support for themes
docs
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>;
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!
Current version doesn't work with the angular 12 application . Can you update ng-hcaptcha?
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.
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 ! 😃
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
How to solve this detail ? please I'm with Angular 6
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?
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?
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
function loadHCaptcha(languageCode) syntax error in
if (languageCode) {
src += &hl=${languageCode}
;
}
browser gets confused with brackets please could you investigate it?
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!
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
Hello,
Is it possible to set the sitekey programmatically or via the component template?
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
Stupid question, but how to refresh the hCaptcha programatically? like when hCaptcha gets expired
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.
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
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 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. **
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 ?
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
When we use formControlName and the captcha expires, it doesn't clean the form and (expire) doesn't work too.
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,
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>;
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 {
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.