Ionic4使用InAppBrowser启动白屏报错：无InAppBrowser提供者

嘿，我看你遇到了InAppBrowser的依赖注入错误，还出现了白页无内容的情况，这在Ionic开发里挺常见的，我帮你梳理下核心原因和解决办法：

核心错误分析 #

你看到的NullInjectorError: No provider for InAppBrowser!是关键——Angular找不到InAppBrowser的服务提供者，导致整个初始化失败，最终显示白页。虽然你已经在AppModule的providers里加了它，但大概率是以下几个环节出了问题：

可能的原因及解决步骤 #

1. 缺失原生Cordova插件 #

@ionic-native的插件只是一个封装层，必须依赖对应的Cordova原生插件才能工作。很多开发者容易只安装npm包，漏掉了原生插件的安装：

• 执行这两条命令补装插件：

  ionic cordova plugin add cordova-plugin-inappbrowser
  npm install @ionic-native/in-app-browser
  

  安装完成后重启你的Ionic服务或重新编译项目。

2. 浏览器环境不支持原生插件 #

如果你是用ionic serve在浏览器里测试，直接调用InAppBrowser会报错——因为这个插件是专为真机/模拟器设计的，浏览器环境下没有对应的原生实现，会直接触发依赖注入失败，导致白页。

• 你可以用Platform服务做环境判断，兼容浏览器场景：
  修改home.page.ts的代码：

  import { Component, OnInit} from '@angular/core';
  import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
  import { Platform } from '@ionic/angular'; // 新增Platform导入
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage implements OnInit {
    // 注入Platform服务
    constructor(private inAppBrowser: InAppBrowser, private platform: Platform) {} 
  
    ngOnInit() {
      // 只在Cordova环境（真机/模拟器）下调用InAppBrowser
      if(this.platform.is('cordova')){
        const browser = this.inAppBrowser.create('https://www.google.com', '_blank', { location: 'no', zoom: 'no'});
      } else {
        // 浏览器环境用window.open替代
        window.open('https://www.google.com', '_blank');
      }
    }
  }
  

3. 模块配置的细节问题 #

再检查下AppModule的配置，确保没有拼写错误：

• 确认导入的是@ionic-native/in-app-browser/ngx（带ngx后缀，适配Angular 8+版本）
• 确认providers数组里的InAppBrowser没有拼写错误，且这个模块确实声明了HomePage（如果HomePage在其他Feature Module里，需要在对应模块的providers里也添加InAppBrowser，或者用共享模块统一管理）

总结 #

你现在的问题本质是依赖注入失败导致应用初始化崩溃，要么是缺了原生插件，要么是在不支持的浏览器环境直接调用了原生插件。按照上面的步骤排查，应该就能解决白页和报错的问题了。

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