Ionic导入ScreenOrientation导致应用黑屏问题求助

在Ionic项目中导入ScreenOrientation后，模拟器内的应用会变为空白白屏。取消注释以下代码并构建运行后即触发该问题，已排查其他组件元素，确认问题出在ScreenOrientation的导入与注入环节。

代码示例：

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

constructor(
    //private screenOrientation: ScreenOrientation,
    private platform: Platform
) { }

附：package.json配置：

{
  "dependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/common": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/material": "^15.0.3",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@capacitor/android": "^4.6.1",
    "@capacitor/core": "^4.6.1",
    "@capacitor/ios": "^4.6.1",
    "@ionic-native/screen-orientation": "^5.36.0",
    "@ionic/angular": "^6.4.1",
    "@types/d3": "^7.4.0",
    "rxjs": "^6.6.7"
  },
  "devDependencies": {
    "@capacitor/cli": "^4.6.1",
    "@types/jest": "^29.2.5"
  }
}

app.module.ts中的提供者配置：

providers: [
    { provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptorService,
      multi: true},
    ScreenOrientation,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
]

• 版本不兼容：当前使用的@ionic-native/screen-orientation@5.36.0是适配Ionic 5的版本，而项目基于Ionic 6 + Angular 15，版本不匹配导致运行时错误，引发白屏。
• 注入方式错误：Ionic 6搭配Capacitor时，@ionic-native插件需通过registerPlugin初始化，而非直接在providers中声明。

解决步骤：

1. 替换插件版本：

npm uninstall @ionic-native/screen-orientation
npm install @ionic-native/screen-orientation@6.x

2. 调整插件使用方式：
   • 在app.module.ts中移除ScreenOrientation的提供者声明。
   • 组件内通过registerPlugin获取实例，而非依赖注入：

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { registerPlugin } from '@capacitor/core';

const screenOrientation = registerPlugin<ScreenOrientation>('ScreenOrientation');

constructor(
    private platform: Platform
) {
    this.platform.ready().then(() => {
        // 示例：锁定竖屏
        screenOrientation.lock('portrait');
    });
}

3. 必须在platform.ready()回调内调用插件方法，确保Capacitor插件完成平台初始化。
4. 清理缓存并重新构建：

npm run clean
ionic build
npx cap sync

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