ngx-turnstile集成Angular时siteKey与索引签名不兼容错误求助

问题描述 #

在Angular 15.2.10项目中执行npm install ngx-turnstile --save安装验证码库后，在app.module.ts中导入并添加至imports数组时出现编译错误，提示Property '"siteKey"' is incompatible with index signature，且库的官方文档不完善、示例无法运行。

环境信息 #

_                      _                 ____ _     ___ 
        / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
       / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
      / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
     /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                    |___/
        
    
    Angular CLI: 15.2.10        
    Node: 14.21.2
    Package Manager: npm 6.14.17
    OS: win32 x64
    
    Angular: 15.2.10
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... platform-browser, platform-browser-dynamic, router
    
    Package                         Version
    ---------------------------------------------------------
    @angular-devkit/architect       0.1502.10
    @angular-devkit/build-angular   15.2.10
    @angular-devkit/core            15.2.10
    @angular-devkit/schematics      15.2.10
    @schematics/angular             15.2.10
    rxjs                            7.8.1
    typescript                      4.9.5

错误详情 #

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>;
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


× Failed to compile.

解决方案 #

1. 安装兼容Angular 15的库版本 #

当前默认安装的ngx-turnstile版本可能采用了Angular 16+的组件声明语法，与Angular 15不兼容。需指定安装适配Angular 15的版本：

npm install ngx-turnstile@15.x --save

2. 正确导入并配置模块 #

在app.module.ts中导入模块并全局配置站点密钥：

import { NgxTurnstileModule } from 'ngx-turnstile';

@NgModule({
  declarations: [
    // 你的组件
  ],
  imports: [
    // 其他依赖模块
    NgxTurnstileModule.forRoot({ siteKey: '你的Cloudflare Turnstile站点密钥' })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件模板中使用验证码组件 #

<ngx-turnstile 
  [siteKey]="'你的Cloudflare Turnstile站点密钥'"
  (resolved)="handleVerificationSuccess($event)"
></ngx-turnstile>

在组件类中实现验证成功的回调方法：

handleVerificationSuccess(response: any) {
  // 处理验证通过后的逻辑，比如提交表单
  console.log('验证成功', response);
}

4. 临时兼容方案（不推荐长期使用） #

若无法找到适配版本，可临时修改tsconfig.json跳过库类型检查：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

内容的提问来源于stack exchange，提问作者PCA