ReCaptcha in Angular

recaptcha.service.ts

import { Injectable } from '@angular/core';

import { environment } from '../../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class RecaptchaService {
  public loadRecaptchaScript(): void {
    const script = document.createElement('script');
    script.src = `https://www.google.com/recaptcha/api.js?render=${environment.recaptchaSiteKey}`;
    script.async = true;
    script.defer = true;

    document.head.appendChild(script);
  }
}

environment.ts

export const environment = {
  recaptchaSiteKey: 'xxxxxxxxxxxxxxxx',
};

app.component.ts

private readonly _recaptchaService = inject(RecaptchaService);

public ngOnInit(): void {
    if (isPlatformBrowser(this._platformId)) {
      this._recaptchaService.loadRecaptchaScript();
    }
}