Angular 18 Support

[ant-ia]

Hi @DethAriel ,

when will angular 18 support be available?

Thank you for your work.

[LakhveerChahal]

Waiting for ng-recaptcha's Angular 18 support as it is causing difficulties in upgrading the project.
Thank you.

[LakhveerChahal]

Raised a pull request to upgrade the library to Angular v18
#325

[ant-ia]

Hi @DethAriel is there any update?
thanks

[vaibhavkumar-sf]

Waiting for it,

[pinpins]

Raised a pull request to upgrade the library to Angular v18 #325

perhaps you could take over and publish your fork on https://www.npmjs.com/

Seems dev is not around anymore

[LakhveerChahal]

@pinpins Did the same. Published it as a new library under the name ng-recaptcha-2

[ReaperTech]

Using npm i ng-recaptcha-2 for the new library at https://www.npmjs.com/package/ng-recaptcha-2?activeTab=readme still gives dependency error:

Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"^17.0.0" from [email protected]

How can we install this new library for Angular 18 without errors?
EDIT:
npm i ng-recaptcha-2 works with the new library at https://www.npmjs.com/package/ng-recaptcha-2?activeTab=readme if you first uninstall the old library npm uninstall ng-recaptcha

[LakhveerChahal]

@ReaperTech Uninstalling the old library & then installing ng-recaptcha-2 is the right way to do it. You shouldn't keep both.

[malek-itani]

Hi @DethAriel is there any update to migrate for Angular18?

[adcore-dev]

Did he answer someone in https://www.linkedin.com/in/%F0%9F%92%BB-ruslan-arkhipau-a87071127/ ?

[vibhukumarcgi]

Is there any update on it? It is restricting me to upgrade to Angular version 18.

[LakhveerChahal]

Is there any update on it? It is restricting me to upgrade to Angular version 18.

You can replace the library, if needed, to recaptcha-2 as mentioned above

[MatthieuOlenine]

@ReaperTech Uninstalling the old library & then installing ng-recaptcha-2 is the right way to do it. You shouldn't keep both.

Did not work for me, still no library for captcha angular 18 today ?

[Ben555555]

@MatthieuOlenine
You can create your own service pretty easily (At least for v3):
https://ben-5.azurewebsites.net/2024/9/5/google-recaptcha-v3-with-angular/

[ccaiza]

//here change code
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';

declare var grecaptcha: any;

@Injectable({
providedIn: 'root'
})
export class RecaptchaService {

// private siteKey: string | null = null;
private loaded: boolean = false;
private scriptElement: HTMLScriptElement | null = null;

constructor(@Inject(DOCUMENT) private readonly document: Document,
@Inject('RECAPTCHA_SITE_KEY') private readonly siteKey: string) {
// this.siteKey = siteKey;
this.addRecaptchaScript();
}

/**

• Agrega el script de google a la pagina.
• @see https://developers.google.com/recaptcha/docs/v3?hl=es-419
• @returns
  */
  private addRecaptchaScript(): void {
  // this.siteKey = siteKey;
  if (this.loaded) {
  return;
  }
  this.scriptElement = this.document.createElement('script');
  this.scriptElement.src = https://www.google.com/recaptcha/api.js?render=${this.siteKey};
  this.scriptElement.async = true;
  this.scriptElement.defer = true;
  this.document.head.appendChild(this.scriptElement);
  this.loaded = true;
  }

/**

• Ocula el boton de recaptcha.
  */
  public removeRecaptchaScript(): void {
  const script = this.document.querySelector(script[src="https://www.google.com/recaptcha/api.js?render=${this.siteKey}"]);
  console.log("aqui vamos a cerrar el dato --->");
  console.log(script);
  if (script) {
  (script as HTMLScriptElement).remove();
  this.loaded = false;
  console.log("Script eliminado correctamente");

  // Eliminar el div de reCAPTCHA
  const recaptchaBadge = this.document.querySelector('.grecaptcha-badge');
  if (recaptchaBadge) {
  (recaptchaBadge as HTMLElement).remove();
  console.log("Div de reCAPTCHA eliminado correctamente");
  }
  } else {
  console.log("No se encontró el script para eliminar");
  }
  }

/**

• Obtiene el token de acceso desde google recaptcha.

• @param action Motivo

• @returns Observable con el token
  */
  public execute(action: string): Observable {
  return new Observable(observer => {
  if (typeof grecaptcha === 'undefined') {
  observer.error('reCAPTCHA not loaded');
  return;
  }

  grecaptcha.ready(() => {
  grecaptcha.execute(this.siteKey, { action }).then((token: string) => {
  observer.next(token);
  observer.complete();
  }).catch((err: any) => {
  observer.error(err);
  });
  });
  });
  }

// public execute(action: string, callback: (token: string) => void): void {
// if (!this.siteKey) {
// throw new Error('Recaptcha site key is not set.');
// }

// grecaptcha.ready(() => {
// grecaptcha.execute(this.siteKey!, { action })
// .then(callback);
// });
// }
}

And componente

@component({
selector: 'app-pages-login',
standalone: true,
imports: [ FormsModule, RouterLink
],
providers:[
RecaptchaService,
{ provide: 'RECAPTCHA_SITE_KEY', useValue: environment.googlePublic}
],
templateUrl: './xxx.html',
styleUrls: ['./xxx.scss'],
})
export class YourComponent implements OnInit, AfterViewInit,OnDestroy {
constructor( private readonly recaptchaV3Service: RecaptchaService){
}

ngOnDestroy(): void {
this.recaptchaV3Service.removeRecaptchaScript();
}

ypuMethod(){
this.recaptchaV3Service.execute('validarClave')
.pipe(
//da de baja los observables para evitar perdida de memoria
takeUntil(this.unsubcribe$)
).subscribe({
next:nn=>{
},error:err=>{
}
});
}
}

[junaidjibran-bnb]

@MatthieuOlenine You can create your own service pretty easily (At least for v3): https://ben-5.azurewebsites.net/2024/9/5/google-recaptcha-v3-with-angular/

is its works?

[pinpins]

Repackaged to support also Angular 19

https://www.npmjs.com/package/ng-recaptcha-19

https://github.com/pinpins/ng-recaptcha-2/commit/6953fea753acd1567df91f15f23657f82753e605