Ionic6+ Capacitor3引入StatusBar/SplashScreen报Provider类型不匹配错误

问题表现 #

基于Ionic 6+ + Capacitor 3技术栈开发时，安装官方状态栏、启动屏插件后，将插件注册到Angular @NgModule的providers数组时触发类型校验错误；切换旧版Ionic Native引入方式虽然消除类型报错，但会触发Ivy引擎兼容性警告。

复现流程 #

• 执行插件安装命令：

npm install @capacitor/status-bar --save
npm install @capacitor/splash-screen --save

npx cap sync

• 导入插件：

import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar, Style } from '@capacitor/status-bar';

• 在@NgModule中注册插件：

@NgModule({
  // 其余配置省略
 providers: [ 
    StatusBar,
    SplashScreen,
    // 其余服务省略
 ]
})

• VS Code抛出如下类型错误：

Type 'StatusBarPlugin' is not assignable to type 'Provider'.
Type 'SplashScreenPlugin' is not assignable to type 'Provider'.

错误根因 #

Capacitor 3及以上版本的官方插件是开箱即用的单例TS对象，不属于Angular可注入服务范畴，不需要也不支持注册到Angular的依赖注入容器中。
旧版@ionic-native/*系列包是为Cordova插件适配Angular DI体系做的中间封装，和Capacitor官方插件的设计逻辑完全不匹配，在新版Angular Ivy渲染引擎下会触发兼容性警告，属于完全错误的引入方式。这个错误本质是Cordova开发模式的思维惯性导致的用法错误。

正确操作步骤 #

• 第一步：删除@NgModule的providers数组中添加的StatusBar、SplashScreen项，Capacitor官方插件不需要做任何DI注册。
• 第二步：如果之前安装了旧版Ionic Native适配包，执行命令彻底卸载：

npm uninstall @ionic-native/splash-screen @ionic-native/status-bar

• 第三步：在需要调用插件能力的组件、服务中，直接导入插件后调用对应方法即可，不需要通过构造函数注入。参考用法：

import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar, Style } from '@capacitor/status-bar';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 直接调用插件方法
    StatusBar.setStyle({ style: Style.Dark });
    SplashScreen.hide();
  }
}

配置提示：如果需要手动控制启动屏隐藏时机，需要在capacitor.config.ts/capacitor.config.json中将SplashScreen的launchAutoHide参数设为false，避免系统自动隐藏启动屏后重复调用hide方法触发异常。

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