Error: node_modules/ngx-turnstile/lib/ngx-turnstile.component.d.ts:34:103 - error TS2344: Type '{ siteKey: { alias: "siteKey"; required: false; }; action: { alias: "action"; required: false; }; cData: { alias: "cData"; 
required: false; }; theme: { alias: "theme"; required: false; }; version: { alias: "version"; required: false; }; tabIndex: { ...; }; appearance: { ...; }; }' 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'.

34     static ɵcmp: i0.ɵɵComponentDeclaration<NgxTurnstileComponent, "ngx-turnstile", ["ngx-turnstile"], { "siteKey": { "alias": "siteKey"; "required": false; }; "action": { "alias": "action"; "required": false; }; "cData": { "alias": "cData"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "version": { "alias": "version"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; }, { "resolved": "resolved"; }, never, never, false, never>;
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:5:29 - error NG8002: Can't bind to 'siteKey' since it isn't a known property of 'ngx-turnstile'.
1. If 'ngx-turnstile' is an Angular component and it has 'siteKey' input, then verify that it is part of this module.
2. If 'ngx-turnstile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

5   template: `<ngx-turnstile [siteKey]="siteKey" theme="auto" [tabIndex]="0"></ngx-turnstile>`,
                              ~~~~~~~~~~~~~~~~~~~


Error: Can't resolve 'https://challenges.cloudflare.com/turnstile/v0/api.js' in 'C:\Babu_HP_Laptop\POC\cloudflare\cloudflare'

<div class="login-page">
	<section class="mat-typography">
  		<h1 class="title"> {{ 'login.title' | translate }} </h1>
	</section>
	
    <div class="form">
        <form [formGroup]="form" class="login-form">
            <mat-form-field class="field">
                <label for="username">{{ 'login.username' | translate }}</label>
                <input matInput type="text" formControlName="username" id="username">
                @if (form.controls["username"].errors) {
                    <mat-error [innerHTML]="'login.username-required' | translate">
                    </mat-error>
                }
            </mat-form-field>
            <mat-form-field class="field">
                <label for="password">{{ 'login.password' | translate }}</label>
                <input matInput type="password" formControlName="password" id="password">
                @if (form.controls["password"].errors) {
                    <mat-error [innerHTML]="'login.password-required' | translate">
                    </mat-error>
                }
            </mat-form-field>
            <ngx-turnstile [siteKey]="siteKey" theme="auto" [formControl]="tokenControl"></ngx-turnstile>
    
            <div  class="col btn-login">
                <button [disabled]="isLoading | async" mat-raised-button color="primary" (click)="onLogin()">
                    {{ 'login.login' | translate }}
                </button>
            </div>
        </form>
    </div>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Subject, take } from 'rxjs';
import { User } from '../../api/common/models';
import { SecurityService } from '../../api/common/services';
import { LoaderService } from '../../services/loader/loader.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  form: FormGroup = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
  });

  isLoading: Subject<boolean> = this.loaderService.isLoading; 
  tokenControl: FormControl = new FormControl('');
   // CHanged value here
  siteKey : string = "XXXX";

  constructor(
      private formBuilder: FormBuilder,
      private router: Router,
      private securityService: SecurityService,
      private errorService: ErrorService,
      private loaderService:  LoaderService
  ) { 
  }

  ngOnInit(): void {
    this.tokenControl = new FormControl();
  }

  onLogin() {
    if (this.form.invalid) {
      return;
    }
    const tokenValue = this.tokenControl.value;
    this.securityService.login({body : {
      username: this.form.controls["username"].value,
      password: this.form.controls["password"].value,
      captchaResponse: tokenValue
    }}).pipe(take(1)).subscribe({
      complete: () => {
        ...
      },  
      error: (error: any) => {
       console.log(error)
      }
    });
  }
}