Angular 15配置cordova-plugin-purchase v13遇注入错误及未定义问题

错误原因分析 #

1. CdvPurchase is not defined：Angular初始化AppModule时，cordova插件还未加载到window对象上，直接引用全局变量CdvPurchase会导致找不到该变量。
2. 依赖注入错误：原代码用CdvPurchase.Store作为注入令牌，但该令牌在模块初始化阶段不存在，导致Angular无法匹配到对应的服务提供者。

解决方案步骤 #

1. 添加TypeScript类型声明 #

创建类型声明文件src/typings/cordova-plugin-purchase.d.ts，避免TypeScript报错：

declare namespace CdvPurchase {
  interface Store {
    initialize(): void;
    // 按需添加你需要的其他方法、属性
    getProducts(productIds: string[]): Promise<any>;
  }

  const Store: Store;
}

interface Window {
  CdvPurchase: typeof CdvPurchase;
}

2. 修改AppModule的服务提供者 #

使用自定义注入令牌替代直接引用未加载的全局变量：

// app.module.ts
import { InjectionToken, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';

// 创建自定义注入令牌
export const CDV_PURCHASE_STORE = new InjectionToken<CdvPurchase.Store>('CdvPurchase.Store');

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot()],
  providers: [
    {
      provide: CDV_PURCHASE_STORE,
      useFactory: () => {
        // 仅在cordova环境下返回Store实例
        return window.CdvPurchase?.Store;
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 调整PaymentService的注入逻辑 #

确保在cordova环境就绪后再使用Store实例：

// payment.service.ts
import { Injectable, Inject } from '@angular/core';
import { Platform } from '@ionic/angular';
import { CDV_PURCHASE_STORE } from './app.module';

@Injectable({
  providedIn: 'root'
})
export class PaymentService {
  private store: CdvPurchase.Store | undefined;

  constructor(
    @Inject(CDV_PURCHASE_STORE) private readonly storeToken: CdvPurchase.Store | undefined,
    private readonly platform: Platform,
  ) {
    this.platform.ready().then(() => {
      if (this.storeToken) {
        this.store = this.storeToken;
        this.store.initialize();
        // 这里可以添加产品注册、事件监听等后续逻辑
      } else {
        console.error('cordova-plugin-purchase 插件未加载，请在cordova环境中测试');
      }
    });
  }

  // 示例：获取商品信息的方法
  async getProducts(productIds: string[]) {
    if (!this.store) {
      throw new Error('Store 未初始化');
    }
    return await this.store.getProducts(productIds);
  }
}

注意事项 #

• 必须在真实cordova环境（模拟器/真机）中测试，浏览器环境下cordova插件不会加载，window.CdvPurchase会是undefined。
• 如果需要在浏览器环境调试，可以添加mock逻辑替代真实的Store实例。

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