引入@ionic-native/fingerprint-aio/ngx后Ionic项目ionic serve页面空白

问题原因 #

@ionic-native/fingerprint-aio是依赖Cordova的原生插件，仅能在真实移动设备或模拟器环境中运行。使用ionic serve启动的纯浏览器环境不会加载Cordova插件，直接将其注册到Angular的providers中时，Angular注入器无法找到有效实例，从而抛出Cannot read properties of undefined (reading 'hasOwnProperty')错误，导致页面无法正常初始化。

解决方案 #

方案一：添加模拟类适配浏览器环境 #

为FingerprintAIO创建一个模拟实现，在开发环境（浏览器）中替代原生插件：

1. 在项目中创建fingerprint-aio.mock.ts文件：

import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';

export class FingerprintAIOMock extends FingerprintAIO {
  // 模拟插件的isAvailable方法
  isAvailable() {
    return Promise.resolve({ isAvailable: true, biometryType: 1 });
  }

  // 模拟插件的show验证方法
  show(options?: any) {
    return Promise.resolve({ withFingerprint: true });
  }
}

2. 修改app.module.ts，根据开发环境条件注册服务：

import { NgModule, isDevMode } from '@angular/core';
// 导入模拟类
import { FingerprintAIOMock } from './fingerprint-aio.mock';
// ...其他原有导入

@NgModule({
  declarations: [AppComponent],
  imports: [NgxIonicImageViewerModule, FormsModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, IonicSelectableModule],
  providers: [
    Clipboard, 
    BarcodeScanner, 
    Geolocation, 
    NativeGeocoder, 
    AccessProviders, 
    dataService,  
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    // 条件注册：开发环境用模拟类，生产环境用真实插件
    { 
      provide: FingerprintAIO, 
      useClass: isDevMode() ? FingerprintAIOMock : FingerprintAIO 
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

方案二：使用Cordova浏览器平台运行 #

安装插件的浏览器适配，使用Cordova的浏览器环境运行项目：

1. 确保已安装对应Cordova插件：

ionic cordova plugin add cordova-plugin-fingerprint-aio --variable FACEID_USAGE_DESCRIPTION="需要使用面容ID进行身份验证"
npm install @ionic-native/fingerprint-aio

2. 在app.module.ts的providers中添加FingerprintAIO：

providers: [
  // ...其他服务
  FingerprintAIO,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
]

3. 使用以下命令启动项目（替代ionic serve）：

ionic cordova run browser

方案三：组件内条件加载插件 #

不在全局providers中注册插件，仅在原生环境下初始化使用：

import { Platform } from '@ionic/angular';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponent {
  private fingerprintInstance: FingerprintAIO | undefined;

  constructor(private platform: Platform) {
    // 仅在Cordova环境下初始化插件
    if (this.platform.is('cordova')) {
      this.fingerprintInstance = new FingerprintAIO();
    }
  }

  async verifyFingerprint() {
    if (!this.fingerprintInstance) {
      console.log('当前环境不支持指纹验证');
      return;
    }
    try {
      const result = await this.fingerprintInstance.isAvailable();
      if (result.isAvailable) {
        const authResult = await this.fingerprintInstance.show({
          title: '身份验证',
          subtitle: '使用指纹验证身份'
        });
        console.log('验证成功', authResult);
      }
    } catch (err) {
      console.error('验证失败', err);
    }
  }
}

注意事项 #

• ionic serve是纯Web环境，不支持任何Cordova原生插件，测试原生功能需使用真实设备、模拟器或ionic cordova run browser
• 若使用方案一的模拟类，可根据需求扩展更多模拟方法，匹配插件的API

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